加入收藏 | 设为首页 | 会员中心 | 我要投稿 宁德站长网 (https://www.0593zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

jQuery怎样操作table增加和删除行?

发布时间:2022-04-11 19:33:07 所属栏目:语言 来源:互联网
导读:今天给大家分享的是jquery操作table的内容,本文主要给大家介绍实现动态增加和删除行的功能,实现效果及代码如下,感兴趣的朋友接下来跟随小编一起看看吧。 实现效果:可动态实现table添加行和删除行,如下图。 代码如下: !DOCTYPE html html lang=en hea
  今天给大家分享的是jquery操作table的内容,本文主要给大家介绍实现动态增加和删除行的功能,实现效果及代码如下,感兴趣的朋友接下来跟随小编一起看看吧。
  实现效果:可动态实现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增加和删除行?

(编辑:宁德站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读