js动态添加、删除行

<meta charset="utf-8">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>利用jquery给指定的table添加一行、删除一行</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
<script type="text/javascript">
////////添加一行、删除一行封装方法///////
/**
* 为table指定行添加一行
*
* tab 表id
* row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
* trHtml 添加行的html代码
*
*/
function addTr(tab, row, trHtml){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
// var $tr=$("#"+tab+" tr").eq(row);
var tr=$("#tab tr").eq(row);
if(tr.size()==0){
alert("指定的table id或行数不存在!");
return;
}
tr.after(trHtml);
}

function delTr(ckb){
//获取选中的复选框,然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行,需选中要删除的行!");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}

/**
* 全选
*
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}

////////添加一行、删除一行测试方法///////
$(function(){
//全选
allCheck("allCkb", "ckb");
});

function addTr2(tab, row){
var trHtml="<tr align='center'><td><input type='checkbox' name='ckb'/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='width:100px;' value='' placeholder='学生姓名'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='width:100px;' value='' placeholder='登录密码'></td><td><input type='text' name='s[]3' class='ui-input met-center' style='width:100px;' value='' placeholder='QQ'></td><td><input type='text' name='s4[]' class='ui-input met-center' style='width:100px;' value='' placeholder='手机'></td><td><input type='text' name='s5[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人姓名'></td><td><input type='text' name='s6[]' class='ui-input met-center' style='width:100px;' value='' placeholder='监护人联系方式'></td></tr>";
addTr(tab, row, trHtml);
}

function delTr2(){
delTr('ckb');
}
</script>
<form action="07.php" method="post">
<table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td width="30"></td>
<td width="100">学生姓名</td>
<td width="100">登录密码</td>
<td width="100">QQ</td>
<td width="100">手机</td>
<td width="100">监护人姓名</td>
<td width="100">监护人联系方式</td>
</tr>
</table>
<input type="button" onclick="addTr2('tab', -1)" value="添加"><input type="button" onclick="delTr2()" value="删除">
<input type="submit" name="button" id="button" value="提交">
</form>
</body>
</html>

 

转载:

https://blog.csdn.net/haibo0668/article/details/77726318

posted @ 2018-07-19 21:05  happyfresher  阅读(305)  评论(0编辑  收藏  举报