欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现动态操作table行

程序员文章站 2022-06-15 15:50:24
jquery 实现动态操作 table 行,供大家参考,具体内容如下实现效果:可动态实现table添加行和删除行,如下图。代码如下:

jquery 实现动态操作 table 行,供大家参考,具体内容如下

实现效果:可动态实现table添加行和删除行,如下图。

jQuery实现动态操作table行

代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>html动态table</title>
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <style>
  table {
   border: 1px solid #e9e9e9;
   border-collapse: collapse;
   border-spacing: 0;
  }

  tr,td {
   border: 1px solid #e9e9e9;
   text-align: center;
  }

  tr {
   height: 20px;
   background-color: #f7f7f7;
   color: #5c6b77;
   font-weight: 600;
  }

  td {
   width: 200px;
  }

  input {
   width: 150px;
  }
 </style>
</head>
<body>

<div style="width: 1000px;height: 250px;overflow-y: auto">
 <table id="dynamictable">
  <tr>
   <td>列1</td>
   <td>列2</td>
   <td>列3</td>
   <td>列4</td>
   <td>操作</td>
  </tr>
  <tr>
   <td colspan="5"><button onclick="addrow()">添加行</button></td>
  </tr>
 </table>
</div>
<script>
 function addrow() {

  var trarray = $("#dynamictable").find("tr");
  var thisindex = trarray.length - 1;

  var addrowhtmlstr = "<tr>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><button onclick='removerow(" + thisindex + ")'>删除行</button></td>" +
   "</tr>"
  $("#dynamictable tr:last").before(addrowhtmlstr);
 }

 function removerow(index) {
  $("#dynamictable").find("tr").eq(index).remove();

  // 删除行时需要注意 index 变化问题
  var trarraynow = $("#dynamictable").find("tr");
  for(var i = index; i < trarraynow.length -1; i++) {
   $("#dynamictable").find("tr").eq(i).find("td").eq(4).remove();
   var htmlstr = "<td><button onclick='removerow(" + i + ")'>删除行</button></td>"
   $("#dynamictable").find("tr").eq(i).append(htmlstr)
  }
 }

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: jQuery table