//删除tr的响应函数
function delA(){
var tr=this.parentNode.parentNode;
//获取要删除员工的名字
//var name=document.getElementsByTagName("td")[0].innerHTML;
//或者不用上面那种方式用下面这种也行
var name=tr.children[0].innerHTML;
//删除之前弹出一个提示框
//confirm (用于弹出一个带有确认和取消按钮的提示框
需要一个字符串作为参数,该字符串会作为提示文字显示出来)
//如果用户点击确认,用户会返回true,点击取消的时候会变成false
var flag=confirm("确认删除"+name"吗?");
if(flag){
//删除tr
tr.parentNode.removeChild(tr);
}
//点击超链接以后,超链接会跳转页面,这个是超链接的默认行为
//但此时我们不希望出现默认行为,可以通过在响应函数的最后return false 来取消默认行为
return false;
};
添加员工的功能:
点击按钮以后,员工的信息将会被添加到表格中
var addEmpButton.onclick=function(){
//获取用户填写的员工信息
//获取员工的name
var name=document.getElementById("empName").value;
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;
//需要将获取到的东西保存到tr 中
//创建tr
var tr =document.createElement("tr");
//创建四个td
var nameTd=document.createElement("td");
var emailTd=document.createElement("td");
var salaryTd=document.createElement("td");
var aTd=document.createElement("td");
//创建一个a元素
var a=document.createElement("a");
//在创建文本节点
var nameText=document.createTextNode(name);
var emailText=document.createTextNode(email);
var salaryText=document.createTextNode(salary);
var delText=document.createTextNode("Delete");
//将文本添加到td 中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
//向a 中添加文本
a.appendChild(delText);
//将a 添加到td 中
atd.appendChild(a);
//将td 添加到tr 中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//向a 中添加href 属性
a.href-"javascript:;";
//为新添加的a 再绑定一次单击响应函数
a.onclick=delA;
//获取table
var employeeTable=document.getElementById("employeeTable");
//获取employeeTable中的tbody
var tbody=employeeTable.getElementsByTagName("tbody")[0];
//将tr 添加到tbody 中
tbody.appendChild(tr);
};
};
javascript学习之添加记录
最新推荐文章于 2022-10-24 19:17:50 发布