<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" οnclick="addTr2('tab', -1)" value="添加"><input type="button" οnclick="delTr2()" value="删除">
<input type="submit" name="button" id="button" value="提交">
</form>
</body>
</html>
方式二：
<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);
var tr=$("#tab tbody").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%">
<thead>
<tr>
<th width='50'></th>
<th width='100'>学生姓名</th>
<th width='100'>登录密码</th>
<th width='100'>QQ</th>
<th width='100'>手机</th>
<th width='100'>监护人姓名</th>
<th width='100'>监护人联系方式</th>
</tr>
</thead>
<tbody>
<!--<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>-->
</tbody>
<tfoot>
<tr>
<th colspan='7' class='formsubmit'>
<input type="button" οnclick="addTr2('tab', -1)" value="添加"><input type="button" οnclick="delTr2()" value="删除">
<input type="submit" name="button" id="button" value="提交">
</th>
</tr>
</tfoot>
</table>
</table>
</form>
</body>
</html>
