JavaScript入门
JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题，这是一个js入门的小练习
对于表格信息的增添与删除
简单的DOM操作html标签即可实现，代码如下：
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >Document</ title >
< style type = "text/css" >
*{
margin: 0;
padding: 0;
}
</ style >
< script type = "text/javascript" >
function delA(){
//点击超链接删除那一行
//使用this，删除父级元素
var tr = this.parentNode.parentNode;
//获取要删除人员的名字
var name=tr.getElementsByTagName("td")[0].innerHTML;
//提示用户是否删除
var flag=confirm("是否删除"+name+"？");
if(flag){
tr.parentNode.removeChild(tr);
}
//阻止浏览器默认行为，比如弹出新的标签页
return false;
}
window.onload=function(){
//点击超链接删除一个员工信息
//获取链接
var allA=document.getElementsByTagName("a");
//绑定响应函数
for(var i=0;i< allA.length ;i++){
allA[i] .onclick = delA ;
}
//添加员工功能,点击按钮将信息添加到表格中
var addEmpButton = document .getElementById("addEmpButton");
addEmpButton.onclick = function (){
//获取输入框中的文本内容
var empName = document .getElementById("empName").value;
var email = document .getElementById("email").value;
var salary = document .getElementById("salary").value;
//创建一个tr
var tr = document .createElement("tr");
//向tr中添加内容
tr.innerHTML="<td>"+empName+"</ td >"+
"< td >"+email+"</ td >"+
"< td >"+salary+"</ td >"+
"< td >< a href = 'javascript:;' >Delete</ a ></ td >";
var a= tr.getElementsByTagName("a")[0];
a.onclick=delA;
//把tr放在table中
var employeeTable=document.getElementById("employeeTable");
//获取tbody
var tbody=document.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
}
</ script >
</ 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测试数据</ td >
< td >5000</ td >
< td >< a href = "" >Delete</ a ></ td >
</ tr >
< tr >
< td >Jerry</ td >
< td >jerry@sohu测试数据</ td >
< td >8000</ td >
< td >< a href = "" >Delete</ a ></ td >
</ tr >
< tr >
< td >Bob</ td >
< td >bob@tom测试数据</ td >
< td >10000</ td >
< td >< a href = "" >Delete</ a ></ td >
</ tr >
< 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" > <!--colspan和rowspan属性是单元格可横跨的行数和列数-->
<!--align属性是文本对齐位置-->
< button id = "addEmpButton" value = "abc" >
Submit
</ button >
</ td >
</ tr >
</ table >
</ div >
</ table >
</ body >
</ html >
代码片段里注释非常清楚，适合拿来练练手。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_51649438/article/details/115415134
查看更多关于javascript实现表格信息增添与删除的详细内容...