js作增行和删行
日期：2014-05-16 浏览次数：20509 次
js做增行和删行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function query(){
$("#table1 tbody").html("");
var addTR="<tr><td><input type='checkbox' id='tr1'></th><th>姓名1</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr2'></th><th>姓名2</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr3'></th><th>姓名3</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr4'></th><th>姓名4</th><th>男</th><th>20</th></tr>";
$("#table1 tbody").append(addTR);
}
function setDel()
{
$("#table1").find("input:checked").each(function(){
$(this).parent().parent().html("");
});
}
function setAdd()
{
var addTR="<tr><td><input type='checkbox' id='tr1'></td><td>新增</td><td>男</td><td>20</td></tr>";
$("#table1 tbody").append(addTR);
}
</script>
</head>
<body>
<fieldset>
<legend>
操作
</legend>
<input type="button" value="删除" onClick="setDel()" />
<input type="button" value="添加" onClick="setAdd()" />
<input type="button" value="查询" onClick="query()" />
</fieldset>
<fieldset>
<legend>
数据结果
</legend>
<table id="table1" bordercolor="1">
<thead>
<tr>
<th>
操作
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</fieldset>
</body>
</html>
?
?
上面的显示结果就是可以在选择了某一行后进行删除，或者给网格增加一个空行。
1 楼
hesihua
2012-02-03
function setAdd()
{
var addTR="<tr><td><input type='checkbox' id='tr1'></td><td>新增</td><td>男</td><td>20</td></tr>";
$("#table1 tbody").append(addTR);
}
上面在网格中添加一行是一种方式，
下面采用另外一种方式进行添加一行：
var cell = document.createElement("td").appendchild(document.createTextNode("foo"));
var row = document.createElement("tr").appendchild(cell);
document.getElementById("table1").appendchild(row);
这种方式是采用的ajax思想
{
var addTR="<tr><td><input type='checkbox' id='tr1'></td><td>新增</td><td>男</td><td>20</td></tr>";
$("#table1 tbody").append(addTR);
}
上面在网格中添加一行是一种方式，
下面采用另外一种方式进行添加一行：
var cell = document.createElement("td").appendchild(document.createTextNode("foo"));
var row = document.createElement("tr").appendchild(cell);
document.getElementById("table1").appendchild(row);
这种方式是采用的ajax思想
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
