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

纯 JS 动态增加删除table 最简洁方法

2011-08-26 13:07 573 查看

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>动态增加删除行</title>

<script language="javascript" type="text/javascript">

function addrow()

{

//get table

var tb=document.getElementById('tblist');

//add row

var row=tb.insertRow();

//add cell

var cell1=row.insertCell();

//set cell's html -姓名

cell1.innerHTML='<input type=\"text\" />';

//2-班级

var cell2=row.insertCell();

cell2.innerHTML='<input type=\"text\" />';

//3-操作

var cell3=row.insertCell();

cell3.innerHTML='<input type=\"button\" value=\"删除\" onclick=\"this.parentNode.parentNode.removeNode(true)\" />';

}

function save()

{

//get table

var str="";

var tb=document.getElementById('tblist');

for(var i=1;i<tb.rows.length;i++)

{

var k=tb.rows(i).cells[0].childNodes[0].value;

if(k=="")

{

alert('姓名一列不能为空！');

return false;

}

str+=k+',';

str+=tb.rows(i).cells[1].childNodes[0].value+',';

str+='|';

}

document.getElementById('Hidden1').value=str;

//服务器端得到隐藏按钮的值，分割字符串就行了

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input type="button" id="btnadd" value="客户端按钮-增加" onclick="addrow()" />

<asp:Button ID="btnsave" runat="server" Text="服务器端按钮-保存" OnClientClick="return save();" OnClick="btnsave_Click" />

<input id="Hidden1" type="hidden" runat="server" />

<table id="tblist" width="75%" border="1" cellpadding="0" cellspacing="0">

<tr><td>姓名</td><td>班级</td><td>操作</td></tr>

</table>

</div>

</form>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航