JQuery元素操作:插入,刪除資料
阿新 • • 發佈：2019-02-03
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素操做</title> <style type="text/css"> p{ text-align: center; } table{ margin: 0 auto; width: 500px; } table,tr,td{ border: 1px solid black; border-collapse: collapse; text-align: center; } </style> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* * $(html) */ function addItem(){ //獲取table var $tb = $("#tb1"); //獲取表示行的節點 var $line = $("<tr></tr>"); //建立存放姓名的單元格 var $tdName=$("<td></td>"); //建立表單中的姓名 var $txtName=$("#username").val(); $tdName.text($txtName); //建立存放年齡的單元格 var $tdAge =$("<td></td>"); //建立年齡 var $txtAge=$("#age").val(); //設定內容 $tdAge.text($txtAge); //建立存放電話的單元格 var $tdTel =$("<td></td>"); //建立電話 var $txtTel=$("#tel").val(); //設定內容 $tdTel.text($txtTel); //建立存放刪除按鈕的單元格 var $tdDel = $("<td></td>"); var $btnDel = $("<button>刪除</button>"); $btnDel.prop("type","button"); //為刪除按鈕設定單擊事件，刪除所在行 $btnDel.click(function(){ $(this).parent().parent().remove(); }); //將按鈕放入單元格 $tdDel.append($btnDel); //在行中追加元素 $line.append($tdName); $line.append($tdAge); $line.append($tdTel); $line.append($tdDel); //將行追加到table $tb.append($line); } $(function(){ $("#btnAdd").click(function(){ addItem(); }) }); </script> </head> <body> <div id="main"> <div id="divform"> <form method="post"> <p> <label >姓名</label> <input type="text" id="username" /> </p> <p> <label>年齡</label> <input type="text" id="age" /> </p> <p> <label>電話</label> <input type="text" id="tel" /> </p> <p> <button type="button" id="btnAdd">新增</button> </p> </form> </div> <hr /> <div id="divtable"> <table id="tb1"> <tr> <td>姓名</td> <td>年齡</td> <td>電話</td> <td>操作</td> </tr> </table> </div> </div> </body> </html>