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

时间:2020-05-12 人气:0

<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"> <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>

</center>

<tr>

<div>

</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需刷新才能执行]

加载全部内容