jQuery怎样操作table增加和删除行?
发布时间:2022-01-12 10:05:40 所属栏目:语言 来源:互联网
导读:今天给大家分享的是jquery操作table的内容,本文主要给大家介绍实现动态增加和删除行的功能,实现效果及代码如下,感兴趣的朋友接下来跟随小编一起看看吧。 实现效果:可动态实现table添加行和删除行,如下图。 代码如下: !DOCTYPE html html lang=en head
今天给大家分享的是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> (编辑:湘西站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |