jq 动态增加、删除表tr行

最新推荐文章于 2023-02-21 15:53:37 发布

我是高手高手高高手

最新推荐文章于 2023-02-21 15:53:37 发布

阅读量2.7k

点赞数 2

分类专栏： jQuery JS技巧 HTML/CSS

本文链接：https://blog.csdn.net/haibo0668/article/details/77726318

版权

JS技巧同时被 3 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

HTML/CSS

73 篇文章 1 订阅

订阅专栏

<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>

我是高手高手高高手

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jq 动态增加、删除表tr行

利用jquery给指定的table添加一行、删除一行 ////////添加一行、删除一行封装方法/////// /** * 为table指定行添加一行 * * tab 表id * row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行 * trHtml 添加行的html代码 * */
复制链接

扫一扫