使用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>
见附件..
分享到:
- 2009-01-21 18:26
- 浏览 1357
- 评论(0)
- 论坛回复 / 浏览 (0 / 4523)
- 查看更多
相关推荐
javascript+css+html教程 全面的PPT教程
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
自己编写的一个Html的Table 利用html,css实现了页面的表示,利用javaScript和jQuery实现了页面的动画效果。
HTML+Javascript+CSS测试题
HTML+CSS+DIV+JavaScript+PHP开发手册打包下载
html+javascript+css(8本chm)无论对于我们jsp或者asp的Web开发的初学者都很有用,关键是方便我们随时参考和查阅。
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记
使用JavaScript+CSS+html计算器,可以实现二元加减乘除计算,以及负数计算
NULL 博文链接:https://cyclone12qwer12.iteye.com/blog/787649
HTML+CSS+JavaScript+JQuery+JSP学习笔记为本人看各种教程视频记录下来的,希望对大家有帮助。
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
利用jsp、struts、hibernate开发JavaWeb应用
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
HTML+CSS+JavaScript+AJAX+JQuery入门
学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 ...
一个DIV+CSS+JAVASCRIPT+FLASH的简单设计网站 非常实用,简单,适合做毕业设计
HTML+css+javascript+div环保网站.rar
包含html+css+javaScript+vue+大前端串讲