jQuery實現動態操作table行
阿新 • • 發佈:2020-11-25
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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。