我有一个TABLE 里面N个TD
我想动态在每个TD里在创建一个层,鼠标移动到Td上的时候,则显示这个层,并可编辑这个层
效果如图
http://detail.zol.com.cn/135/134596/param.shtml
我想动态在每个TD里在创建一个层,鼠标移动到Td上的时候,则显示这个层,并可编辑这个层
效果如图
http://detail.zol.com.cn/135/134596/param.shtml
<td onmouseover="document.getElementById('div1').style.display='block';">
<div id="div1" style="display:none"></div></td>
代码类似于上面就可以实现。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var TH_HEIGHT="20px";
var THCOLOR="#ffff99";
var THBGCOLOR= "#ccecff";
var NEW_COLOR="#ffffff";
var lastObj;
function createEventTable() {
var newRow,col1,col2,col3;
var ln = document.getElementById("tb1").rows.length;
if( ln > 0){
for(var i=0; i<ln; i++){
if(document.getElementById("tb1").rows.length <= 0)break;
document.getElementById("tb1").deleteRow(-1);
}
}
for(var colno=0; colno<15; colno++){
newRow = document.getElementById("tb1").insertRow(-1);
newRow.id = 'r'+colno;
document.getElementById("r"+colno).height = TH_HEIGHT;
document.getElementById("r"+colno).bgColor = THCOLOR;
col1=newRow.insertCell(0);
col2=newRow.insertCell(1);
col3=newRow.insertCell(2);
col1.id="col1"+colno
col2.id = "col2"+colno;
col3.id = "col3"+colno;
col1.innerText = "列一"+colno;
col2.innerText = "列二"+colno;
col3.innerText = "列三"+colno;
col1.onmouseover=alertMe;
col2.onmouseover=alertMe
col3.onmouseover=alertMe
}
} function alertMe(){
if(lastObj == this) return false;
if(lastObj!=null) lastObj.style.backgroundColor = THCOLOR;
this.style.backgroundColor = NEW_COLOR;
lastObj = this;
document.getElementById("movediv").style.left=this.offsetLeft-5;
document.getElementById("movediv").style.top=this.offsetTop+12;
document.getElementById("movediv").innerHTML=this.innerHTML
}
function rowNo(posx){
var no=(parseInt(posx)-50)/36
return Math.round(no);
}
window.onload=function(){
createEventTable();
} </script>
<body ><div id=movediv style="background-color:#cceecc;position:absolute;width:56px;height:20px;z-index:2"></div>
<TABLE cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black" border="1" style="position:absolute;left:50px;z-index:1">
<thead>
<COLGROUP>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<TR height="20px" bgColor="#ccecff" id="sss">
<TH width="36" >列1</TH>
<TH width="36" >列2</TH>
<TH width="36" >列3</TH>
</TR>
</thead>
<TBODY id="tb1">
</TBODY>
</TABLE></body>
</html>
var ea, div,cur;
function doit(obj){
obj.appendChild(div);
div.style.display = "block";
cur = obj;
}
function edit(){
if(cur==null) return;
var de = cur.getElementsByTagName("div")[0];
var s = de.innerHTML;
var r = prompt("修改", s)
if(s!=null && s !="") de.innerHTML = r;
}
window.onload=function(){
div = document.getElementById("pad");}
</script>
<table>
<tr>
<td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
</tr>
<tr>
<td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
</tr>
<tr>
<td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
</tr> <tr>
<td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
</tr>
</table>
<div id="pad" style="width:80px;display:none;float:right" onmouseover="event.cancelBubble=true;"><a id="lk" href="javascript:edit();void(0);">编辑</a></div>
BeenZ 我的table是如下代码,该怎么绑定啊
<table border="1" width="600" id="table3" style="border-collapse: collapse" bordercolor="#000000">
<tr>
<td align="center">项目</td>
<td align="center">单位</td>
<td align="center">数量</td>
<td align="center">备 注</td>
</tr>
<tr>
<td align="center">供水平均温度</td>
<td align="center"><font face="宋体">℃</font></td>
<td exp="AverData(15,1)" align="center" > </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">回水平均温度</td>
<td align="center"><font face="宋体">℃</font></td>
<td exp="AverData(15,2)" align="center" > </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">温差</td>
<td align="center"><font face="宋体">℃</font></td>
<td exp="AverData(15,1)-AverData(15,2)" align="center" > </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">供水平均压力</td>
<td align="center">Mpa</td>
<td exp="AverData(15,5)" align="center" > 4</td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">回水平均压力</td>
<td align="center">Mpa</td>
<td exp="AverData(15,6)" align="center" onmouseover="showTip(event)"> </td>
<td align="center"> </td>
</tr>
</table>
</div>
<div align="center">
<table border="0" width="600" id="table4" style="border-collapse: collapse">
<tr>
<td>负责人:</td>
<td>统计员:</td>
</tr>
</table>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
</head>
<style>
.over {background-color:898989;};
.out {background-color:989898;};
.shadowDiv {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0px : left : 0px;
background-color: #999;
filter: alpha(opacity = 70);
opacity: 0.7;
z-index: 111111111
}
.formDiv {
width: 200px;
height: 100px;
position: absolute;
top:280px;
background-color: #FFF;
opacity: 0.7;
}
</style>
<script language=javascript> function conf(){
document.getElementById("div1").style.display = "none" ;
o.parentNode.parentNode.parentNode.childNodes[0].innerHTML = document.getElementById("name1").value ;
}
function cancel(){
document.getElementById("div1").style.display = "none" ;
}
var o ;
function error(obj){
o = obj ;
document.getElementById("name1").value = "" ;
document.getElementById("div1").style.Height = document.body.clientHeight ;
document.getElementById("div1").style.width = document.body.clientWidth ;
document.getElementById("div1").style.display = "block" ;
}
function over(obj){
obj.className = "over" ;
obj.childNodes[1].childNodes[0].style.display = "block" ;
}
function out(obj){
obj.className = "out" ;
obj.childNodes[1].childNodes[0].style.display = "none" ;
}
</script>
<body >
<div id="div1" class="shadowDiv" align="center">
<div class="formDiv">
<br>
<table width="90%">
<tr>
<td width="40%">输入:</td>
<td><input width="10" type="text" name="name1" id="name1"></td>
</tr>
</table>
<br>
<input type="button" value="修改" onclick="conf()">
<input type="button" value="取消" onclick="cancel()">
</div>
</div>
<table cellSpacing="0" cellPadding="1" border="1">
<tr class="out" onmouseover="over(this)" onmouseout="out(this)">
<td width="200">1</td>
<td width="100"><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
</tr>
<tr class="out" onmouseover="over(this)" onmouseout="out(this)">
<td width="200">2</td>
<td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
</tr>
<tr class="out" onmouseover="over(this)" onmouseout="out(this)">
<td width="200">3</td>
<td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
</tr>
<tr class="out" onmouseover="over(this)" onmouseout="out(this)">
<td width="200">4</td>
<td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
</tr>
<tr class="out" onmouseover="over(this)" onmouseout="out(this)">
<td width="200">5</td>
<td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
</tr>
</table>
</body>
</html>