添加删除记录（原生）
示例：
/*style.css*/ @CHARSET "UTF-8"; #total { width: 450px; margin-left: auto; margin-right: auto; } ul { list-style-type: none; } li { border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float: left; } .inner { width: 400px; border-style: solid; border-width: 1px; margin: 10px; padding: 10px; float: left; } #employeeTable { border-spacing: 1px; background-color: black; margin: 80px auto 10px auto; } th,td { background-color: white; } #formDiv { width: 250px; border-style: solid; border-width: 1px; margin: 50px auto 10px auto; padding: 10px; } #formDiv input { width: 100%; } .word { width: 40px; } .inp { width: 200px; } #employeeTable, #employeeTable th, #employeeTable td{ border: 1px solid; border-spacing: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加删除记录（原生）</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name: </td> <td class="inp"> <input type="text" name="empName" id="empName" /> </td> </tr> <tr> <td class="word">email: </td> <td class="inp"> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td class="word">salary: </td> <td class="inp"> <input type="text" name="salary" id="salary" /> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> <script type="text/javascript"> /* * 功能说明： * 1.点击'Submit'，根据输入的信息在表单中生成一行员工信息 * 2.点击Delete链接，提示删除当前行信息，点击确定后删除信息 * 技术要点： * 1.DOM查询 * 2.绑定事件监听 * 3.DOM增删改 * 4.取消事件的默认行为 */ function removeTr(){ var trNode = this.parentNode.parentNode; var tds = trNode.getElementsByTagName("td"); var nameStr = tds[0].firstChild.nodeValue; var flag = confirm("真的要删除" + nameStr + "的信息吗？"); if(flag){ trNode.parentNode.removeChild(trNode); } return false; } window.onload = function(){ //目标1：点击Delete删除记录 var aEles = document.getElementsByTagName("a"); for(var i = 0;i < aEles.length;i++){ aEles[i].onclick = removeTr; } //目标2：点击Submit增加记录 var subBtn = document.getElementById("addEmpButton"); subBtn.onclick = function(){ var nameText = trim(document.getElementById("empName").value); var emailText = trim(document.getElementById("email").value); var salaryText = trim(document.getElementById("salary").value); document.getElementById("empName").value = nameText; document.getElementById("email").value = emailText; document.getElementById("salary").value = salaryText; if(nameText == "" || emailText == "" || salaryText == ""){ alert("您输入的内容不完整"); return ; } //组装节点 var nameTd = document.createElement("td"); nameTd.appendChild(document.createTextNode(nameText)); var emailTd = document.createElement("td"); emailTd.appendChild(document.createTextNode(emailText)); var salaryTd = document.createElement("td"); salaryTd.appendChild(document.createTextNode(salaryText)); var aTd = document.createElement("td"); var aNewEle = document.createElement("a"); aNewEle.href = "deleteEmp?id=XXX"; aNewEle.appendChild(document.createTextNode("Delete")); aNewEle.onclick = removeTr; aTd.appendChild(aNewEle); var trNode = document.createElement("tr"); trNode.appendChild(nameTd); trNode.appendChild(emailTd); trNode.appendChild(salaryTd); trNode.appendChild(aTd); var empTable = document.getElementById("employeeTable"); empTable.appendChild(trNode); } function trim(str){ var reg = /^s*|s*$/g; return str.replace(reg,""); } } </script> </body> </html>
添加删除记录（jQuery）
示例：
/*style.css*/ @CHARSET "UTF-8"; #total { width: 450px; margin-left: auto; margin-right: auto; } ul { list-style-type: none; } li { border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float: left; } .inner { width: 400px; border-style: solid; border-width: 1px; margin: 10px; padding: 10px; float: left; } #employeeTable { border-spacing: 1px; background-color: black; margin: 80px auto 10px auto; } th,td { background-color: white; } #formDiv { width: 250px; border-style: solid; border-width: 1px; margin: 50px auto 10px auto; padding: 10px; } #formDiv input { width: 100%; } .word { width: 40px; } .inp { width: 200px; } #employeeTable, #employeeTable th, #employeeTable td{ border: 1px solid; border-spacing: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加删除记录（jQuery）</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="empName" id="empName"/> </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email"/> </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary"/> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 功能说明： * 1.点击'Submit'，根据输入的信息在表单中生成一行员工信息 * 2.点击Delete链接，提示删除当前行信息，点击确定后删除信息 * 技术要点： * 1.DOM查询 * 2.绑定事件监听 * 3.DOM增删改 * 4.取消事件的默认行为 */ $(function () { $('#addEmpButton').click(function () { var $empName = $('#empName'); var $email = $('#email'); var $salary = $('#salary'); var empName = $empName.val(); var email = $empName.val(); var salary = $empName.val(); var id = Date.now(); // <tr> // <td>Bob</td> // <td>bob@tom.com</td> // <td>10000</td> // <td><a href="deleteEmp?id=003">Delete</a></td> // </tr> $('<tr></tr>') .append('<td>'+empName+'</td>') .append('<td>'+email+'</td>') .append('<td>'+salary+'</td>') .append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>') .appendTo('#employeeTable') .find('a') .click(clickA); $empName.val(''); $email.val(''); $salary.val(''); }) $('a').click(clickA); function clickA (event) { event.preventDefault(); var $tr = $(this).parent().parent(); var name = $tr.children('td:first').html(); if(confirm('确定删除'+name+'吗?')) { $tr.remove(); } } }) </script> </body> </html>