javascript对表格的操作

      small 2005-8-30 15:17
好东东
--------------------------------
click the cells to know cellIndex, rowIndex, rows and cols.
<table border=1 cellspacing=0 cellpadding=0 onclick=knowIt()>
<tr>
    <td colspan=2>11</td>
    <td>12</td>
    <td>13</td>
</tr>
<tr>
    <td rowspan=2>21</td>
    <td>21</td>
    <td>22</td>
    <td>22</td>
</tr>
<tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
</tr>
</table>
<script language="javascript">
<!--
function knowIt(){
alert("cellIndex:"+event.srcElement.cellIndex+"; rowIndex:"+event.srcElement.parentNode.rowIndex+"; rows:"+event.srcElement.parentNode.parentNode.rows.length+"; cols:"+event.srcElement.parentNode.cells.length)
}
//-->
</script>

------------------------------------------------------

<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>
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}