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

js实现table新增，删除行

2015-08-09 17:37 661 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<script>

function rowsAdd(){

var Container = document.getElementById("play");

var detailNum = Container.rows.length;

//var _table=document.getElementById("takesheetspec");

var _tr=Container.insertRow(-1);

//alert(_tr.rowIndex);

var _id='pd'+detailNum;

for(var i=0;i<8;i++)

{

var _td=_tr.insertCell(i);

_tr.id=_id;

switch(i)

{

case 0:

_td.id="cell"+detailNum;

_td.innerHTML=detailNum+"<a href='#' name='delete' onclick=tabledel("+detailNum+")>删除</a>";

break;

case 1:

_td.innerHTML="<input type='text' size='7'>";

break;

case 2:

_td.innerHTML="<input type='text' size='7'>";

break;

case 3:

_td.innerHTML="<input type='text' size='7'>";

break;

case 4:

_td.innerHTML="<input type='text' size='7'>";

break;

case 5:

_td.innerHTML="<input type='text' size='7'>";

break;

case 6:

_td.innerHTML="<input type='text' size='7'>";

break;

case 7:

_td.innerHTML="<input type='text' size='7'>";

break;

case 8:

_td.innerHTML="<input type='text' size='7'>";

break;

}

}

}

function tabledel(row)

{

var Container = document.getElementById("play");

//alert(document.getElementById('index').value);

var _tr=document.getElementById("pd"+row);

row=_tr.rowIndex;

Container.deleteRow(row);

var LastTrIndex = Container.rows.length;

//var afterDel=row-1;

row+=1;

for(row;row<=LastTrIndex;row++) {

var _td=document.getElementById("cell"+row);

var _tr=document.getElementById("pd"+row);

var newRow=_tr.rowIndex;

_tr.id='pd'+newRow;

_td.id="cell"+newRow;

_td.innerHTML=newRow+"<a href='#' name='delete' onclick=tabledel("+newRow+")>删除</a>";

}

}

function tabAllDel()

{

var Container = document.getElementById("play");

Container.firstChild.removeNode(true);

//增加一行

var tr=Container.insertRow(-1);

var cell = tr.insertCell(0);

cell.innerHTML = " ";

cell = tr.insertCell(1);

cell.innerHTML = "name";

cell = tr.insertCell(2);

cell.innerHTML = "sex";

cell = tr.insertCell(3);

cell.innerHTML = "age";

cell = tr.insertCell(4);

cell.innerHTML = "QQ";

cell = tr.insertCell(5);

cell.innerHTML = "MSN";

cell= tr.insertCell(6);

cell.innerHTML = "E-mail";

cell= tr.insertCell(7);

cell.innerHTML = "remark";

}

</script>

</HEAD>

<BODY>

<a href="#" onclick="rowsAdd()">add</a>

<a href="#" onclick="tabAllDel()">deleteall</a>

<table id="play">

<tr>

<td> </td>

<td>name</td>

<td>sex</td>

<td>age</td>

<td>QQ</td>

<td>MSN</td>

<td>E-mail</td>

<td>remark</td>

</tr>

</table>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航