表格增加行、刪除行
阿新 • • 發佈:2018-11-03
一、程式碼:
<html> <head> <meta charset="utf-8" /> <title>table test</title> <!-- 作者:[email protected] 時間:2018-11-02 描述:增加、刪除行 --> <script src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> //增加行 function addRow(){ var myTab = document.getElementById("myTable"); var tr = myTab.insertRow(); var td1 = tr.insertCell(); var td2 = tr.insertCell(); var td3 = tr.insertCell(); var td4 = tr.insertCell(); td1.innerHTML = "張甜"; td2.innerHTML = "18"; td3.innerHTML = "610234838wer8r49234"; td4.innerHTML = "<input type='button' value='-' onclick='deleteRow(this)'/>"; } //刪除行 function deleteRow(btn){ var tr= btn.parentNode.parentNode; var myTab = document.getElementById("myTable"); myTab.deleteRow(tr.rowIndex); } </script> </head> <body> <input type="button" value="+" id="addMsg" onclick="addRow()"/> <table border="1" id="myTable"> <tr> <th>name</th> <th>age</th> <th>postCode</th> <th>操作</th> </tr> <tr> <td>李毅1</td> <td>28</td> <td>610323234419239211232231213223873</td> <td><input type="button" value="-" onclick='deleteRow(this)'/></td> </tr> <tr> <td>李毅2</td> <td>28</td> <td>610323234419239211232231213223873</td> <td><input type="button" value="-" onclick='deleteRow(this)'/></td> </tr> </table> </body> </html>
二、效果