JavaScript+CSS2+DIV+Table单击Table的单元格(td)弹出层可以修改单元格 JavaScriptCC++C#
程序员文章站
2024-02-04 11:13:34
...
使用JavaScript+CSS2+DIV+Table单击Table的单元格(td)弹出层可以修改单元格的值
效果类似于C#中修改DataGridView空间单元格的值...
<html>
<head>
<title>JavaScript表格单元格事件</title>
<style type="text/css">
td{
border:lightblue solid 1px;
}
</style>
</head>
<script language="JavaScript" type="text/javascript">
var obj=0
var ob=null
function find(div){
obj=div
x=document.body.scrollLeft+event.clientX-obj.style.pixelLeft
y=document.body.scrollTop+event.clientY-obj.style.pixelTop
}
function dragit(){
if(obj==0)return false
else{
obj.style.pixelLeft=document.body.scrollLeft+event.clientX-x
obj.style.pixelTop=document.body.scrollTop+event.clientY-y
}
}
function getEventTarget(e){
e = e || window.event;
return e.target || e.srcElement;
}
function editCell(e){
var target = getEventTarget(e);
if (target.tagName.toLowerCase() === 'td') {
document.getElementById("div1").style.display = "";
document.getElementById("div1").style.left=event.x;
document.getElementById("div1").style.top=event.y;
document.getElementById('input').value="请输入值";
ob = target;
}
}
function inputValue(){
if (document.getElementById('input').value != ""&&document.getElementById('input').value != "请输入值") {
ob.innerHTML = document.getElementById('input').value;
}else{
alert("您未做任何修改...");
}
document.getElementById("div1").style.display = "none";
}
function keypress(){
if(document.getElementById('div1').style.display != 'none'){
if(event.keyCode===13){
inputValue();
}
}
}
window.onkeypress=keypress;
</script>
<body onmousemove="dragit()" onmouseup="obj=0">
<div id="div1" onmouseover="this.style.cursor='move';"onmousedown="if(event.button==1)find(div1)" style="display:none; width:220px; height:20px; border:pink solid 1px; position:absolute; z-index:111;">
<input type="text" id="input" value="请输入值" onclick="if(this.value==='请输入值'){this.value='';}" /><input type="button" id="confirm" onmouseover="this.style.cursor='hand';" onclick="inputValue()" value="确 认"/>
</div>
<table cellpadding="0" align="center" id="report" cellspacing="0" style="width:80%; height:200;border:lightblue solid 1px;">
<caption align="center" style="color:red; font-size:15px;"><b>点击单元格修改值</b></caption>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">22222222</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">33333333</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">44444444</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">55555555</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">66666666</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">77777777</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">88888888</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">99999999</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">00000000</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">22222222</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
</table>
</body>
</html>
见附件..
效果类似于C#中修改DataGridView空间单元格的值...
<html>
<head>
<title>JavaScript表格单元格事件</title>
<style type="text/css">
td{
border:lightblue solid 1px;
}
</style>
</head>
<script language="JavaScript" type="text/javascript">
var obj=0
var ob=null
function find(div){
obj=div
x=document.body.scrollLeft+event.clientX-obj.style.pixelLeft
y=document.body.scrollTop+event.clientY-obj.style.pixelTop
}
function dragit(){
if(obj==0)return false
else{
obj.style.pixelLeft=document.body.scrollLeft+event.clientX-x
obj.style.pixelTop=document.body.scrollTop+event.clientY-y
}
}
function getEventTarget(e){
e = e || window.event;
return e.target || e.srcElement;
}
function editCell(e){
var target = getEventTarget(e);
if (target.tagName.toLowerCase() === 'td') {
document.getElementById("div1").style.display = "";
document.getElementById("div1").style.left=event.x;
document.getElementById("div1").style.top=event.y;
document.getElementById('input').value="请输入值";
ob = target;
}
}
function inputValue(){
if (document.getElementById('input').value != ""&&document.getElementById('input').value != "请输入值") {
ob.innerHTML = document.getElementById('input').value;
}else{
alert("您未做任何修改...");
}
document.getElementById("div1").style.display = "none";
}
function keypress(){
if(document.getElementById('div1').style.display != 'none'){
if(event.keyCode===13){
inputValue();
}
}
}
window.onkeypress=keypress;
</script>
<body onmousemove="dragit()" onmouseup="obj=0">
<div id="div1" onmouseover="this.style.cursor='move';"onmousedown="if(event.button==1)find(div1)" style="display:none; width:220px; height:20px; border:pink solid 1px; position:absolute; z-index:111;">
<input type="text" id="input" value="请输入值" onclick="if(this.value==='请输入值'){this.value='';}" /><input type="button" id="confirm" onmouseover="this.style.cursor='hand';" onclick="inputValue()" value="确 认"/>
</div>
<table cellpadding="0" align="center" id="report" cellspacing="0" style="width:80%; height:200;border:lightblue solid 1px;">
<caption align="center" style="color:red; font-size:15px;"><b>点击单元格修改值</b></caption>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">22222222</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">33333333</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">44444444</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">55555555</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">66666666</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">77777777</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">88888888</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">99999999</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">00000000</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">22222222</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
<tr>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
<td width="20%" align="center" title="点击单元格修改值" onmouseover="this.style.cursor='hand';" onclick="editCell(this.event)">11111111</td>
</tr>
</table>
</body>
</html>
见附件..