首页 > 网络编程 > JavaScript > javascript技巧 > javascript Table行操作

javascript完整操作Table的增加行，删除行的列子大全

2008-10-25 19:14:56 投稿：mdxy-dxy

非常漂亮的js操作table行代码函数。比较方便

<HTML>

<TITLE>Form Object example</TITLE>

<HEAD>

function delrow1()

{

var oElement=event.srcElement;

while(oElement.tagName!="TR")

{

oElement=oElement.parentElement;

}

var oTBody=oElement.parentElement;

oTBody.removeChild(oElement)

}

function delrow2()//刪除当前行

{

var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;

document.all.yltable.deleteRow(currRowIndex);//table10--表格id

}

function insertrow1() //增加的一行方法1

{

var newnode = document.getElementById('yltable').lastChild.cloneNode(true);

document.getElementById('yltable').appendChild(newnode);

}

function insertrow2() //增加的一行方法2

{

newRow=document.all.yltable.insertRow(-1);

var j_1 = document.all.yltable.rows.length;

newcell=newRow.insertCell();

newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML=""+j_1+"";

newcell=newRow.insertCell() ;

newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";

newcell=newRow.insertCell() ;

newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1">&nbsp;<input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

function inserttable()

{

var newnode = document.getElementById('yltable').cloneNode(true);

document.getElementById('ylform').appendChild(newnode);

}

</script>

</HEAD>

<BODY>

&nbsp; <input name="button2" type="button" onClick="insertrow1()" value="增加一行1">

&nbsp;

</center>

<tr>

</div></td>

</div></td>

</tr>

</TBODY>

<tr>

</div></td>

</div></td>

</tr>

</TBODY>

<tr>

</div></td>

</div></td>

</tr>

</TBODY>

</table>

</center>

</form>

</BODY>

</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript完整操作Table的增加行，删除行的列子大全

您可能感兴趣的文章: