您的位置：首页 > Web前端 > JavaScript

javascript操作表格对象

2007-12-04 08:06 381 查看
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
if (elm.tagName != "TD") return;
elm.innerHTML = "<input onblur='hide()' value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
function deleteLine()
{
for (var i=tbody1.children.length-1; i>=0 ; i-- )
if (tbody1.children[i].firstChild.firstChild.checked)
tbody1.deleteRow(i);
}
function addLine()
{
elm = thead1.lastChild.cloneNode(true)
elm.style.display="";
tbody1.insertBefore(elm);
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead id=thead1>
<tr>
<th></th>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</tr>
<TR style="display:none">
<td><input type=checkbox id=checkLine></td>
<TD>000</TD>
<TD>000</TD>
<TD>000</TD>
</TR>
</thead>
<tbody onClick="showinput()" id=tbody1>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<td><input type=checkbox id=checkLine></td>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
<tfoot>
<tr>
<td colspan=4 align=center>
<button onClick="deleteLine()">del</button>
<button onClick="addLine()">add</button>
</td>
</tr>
</tfoot>
</TABLE>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航