浏览 4552 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-01-21
使用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> 见附件.. 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
