javascript学习之添加记录

//删除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);






};
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值