使用javascript點選新增增加一行
阿新 • • 發佈：2019-02-06
<pre name="code" class="html"><html> <head> <title>js-sample</title> <script type="text/javascript"> <!-- var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows); var name = tr.insertCell(0); name.innerHTML = '<input type="text">'; var tel = tr.insertCell(1); tel.innerHTML = '<input type="text">'; var rdo = tr.insertCell(2); rdo.innerHTML = '<input type="radio" value="0" name="rdo' + count + '">Yes <input type="radio" value="1" name="rdo' + count + '">No'; var chk = tr.insertCell(3); chk.innerHTML = '<input type="checkbox" value="0" name="chk' + count + '">Modify <input type="checkbox" value="1" name="chk' + count + '">Delete'; var del = tr.insertCell(4); del.innerHTML = '<input type="button" onclick="del(this)" value="Delete">'; count++; } function del(btn) { var tr = btn.parentElement.parentElement; var tbl = tr.parentElement; tbl.deleteRow(tr.rowIndex-1); } //--> </script> </head> <body> <input type="button" onclick="add()" value="Add-Customer"> <table border="1" style="width:100%" id="ci" name="ci"> <caption>customer information</caption> <thead> <tr> <th>Name</th> <th>Tel</th> <th>Radio</th> <th>CheckBox</th> <th> </th> </tr> </thead> <tbody> <tr> <td><input type="text" value="Zhang San"></td> <td><input type="text" value="111"></td> <td> <input type="radio" value="0" name="rdo">Yes <input type="radio" value="1" name="rdo">No </td> <td> <input type="checkbox" value="0" name="chk">Modify <input type="checkbox" value="1" name="chk">Delete </td> <td> <input type="button" onclick="del(this)" value="Delete"> </td> </tr> </tbody> </table> </body></html>