视频链接:
JS基础-尚硅谷视频p105
基础版本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加删除记录练习</title>
<script type="text/javascript">
/**
* 删除tr的响应函数
*/
function delA(){
/**
* 点击超链接之后 超链接会跳转页面, 但是此时不希望出现默认行为
*/
var tr=this.parentNode.parentNode;
var name=tr.getElementsByTagName("td")[0].innerHTML;
//删除之前弹出提示框
/**
* confirm需要一个参数
*/
var flag=confirm("确认删除"+name+"吗?");
if(flag==true) tr.parentNode.removeChild(tr);
return false;//取消超链接的默认行为
};
window.onload=function(){
//为提交按钮绑定单机响应函数
var addEmpButton=document.getElementById("addEmpButton");
addEmpButton.onclick=function(){
//获取员工的名字
var name=document.getElementById("empName").value;
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;
//创建tr和td
var tr=document.createElement("tr");
var nameTd=document.createElement("td");
var emailTd=document.createElement("td");
var salaryTd=document.createElement("td");
var aTd=document.createElement("td");
//创建一个a元素
//超链接a 超链接里面的字aTd
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.