html DOM技术上面的这个gif就是完成的效果，下面来讲解是如何实现的。
代码利用DOM技术所有的标签都可以看出节点，类似数据结构中的树结构，有孩子节点和父亲节点，在标签节点里面还可以设置属性节点，下面来通过例子好好体会。
<html>
<head>
<style>
label{
font-family:'Courier New', Courier, monospace;
}
th{
font-weight: bold;
}
style>
<title>
初始界面
title>
<script>
function d1(obj){//删除一整行。
tdnode=obj.parentNode;
trnode=tdnode.parentNode;
tablenode=trnode.parentNode;
var remove=confirm("是否要删除这条信息？");
if(remove){
tablenode.removeChild(trnode);
}
}
function add(){
text1=document.getElementById("t1");
text2=document.getElementById("t2");
text3=document.getElementById("t3");
tableOne=document.getElementById("table1");
var trNode=document.createElement("tr");
var tdNode1=document.createElement("td");
tdNode1.innerHTML=text1.value;
var tdNode2=document.createElement("td");
tdNode2.innerHTML=text2.value;
var tdNode3=document.createElement("td");
tdNode3.innerHTML=text3.value;
var tdNode4=document.createElement("td");//在第四个格子还要加一个a标签。
var aNode=document.createElement("a");
aNode.innerHTML="删除";
aNode.setAttribute("href","javascript:void(0)");
aNode.setAttribute("onclick","d1(this)");
tdNode4.appendChild(aNode);
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode3);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode4);
tableOne.appendChild(trNode);
}
script>
head>
<body>
<br><br>
<form align="center">
<label>编号：label> <input type="text" id="t1">
<label>姓名：label> <input type="text" id="t2">
<label>性别：label> <input type="text" id="t3">
<input type="button" value="添加" onclick="add()"><br><br>
form>
<hr color="red">
<table id="table1" border="1px" align="center" cellpadding="20" cellspacing="0px">
<caption style="font-size: 20px;">学生信息表caption>
<tr>
<th>编号th><th>姓名th><th>性别th><th> *** 作th>
tr>
<tr id="id1">
<td>001td>
<td>马云td>
<td>男td>
<td><a href="javascript:void(0)" onclick="d1(this)">删除a>td>
tr>
<tr id="id2">
<td>002td>
<td>马化腾td>
<td>男td>
<td><a href="javascript:void(0)" onclick="d1(this)">删除a>td>
tr>
table>
body>
html>
HTML代码分析大体思路：我们通过html来写出表格界面，然后再通过CSS优化我们的界面，最后通过JS完成我们的逻辑。
<body>
<br><br>
<form align="center">
<label>编号：label> <input type="text" id="t1">
<label>姓名：label> <input type="text" id="t2">
<label>性别：label> <input type="text" id="t3">
<input type="button" value="添加" onclick="add()"><br><br>
form>
<hr color="red">
<table id="table1" border="1px" align="center" cellpadding="20" cellspacing="0px">//设置边框为1px，表格居中.
<caption style="font-size: 20px;">学生信息表caption>
<tr>
<th>编号th><th>姓名th><th>性别th><th> *** 作th>
tr>
<tr id="id1">
<td>001td>
<td>马云td>
<td>男td>
<td><a href="javascript:void(0)" onclick="d1(this)">删除a>td>
tr>
<tr id="id2">
<td>002td>
<td>马化腾td>
<td>男td>
<td><a href="javascript:void(0)" onclick="d1(this)">删除a>td>
tr>
table>
body>
cellpadding=“20” cellspacing=“0px” :cellpadding这里设置一个单元格的大小，cellspacing是设置单元格之间的间距。
同时给每一行中的最后一个单元格添加了删除的超链接，这里的超链接由于不要实现跳转，
href设置为：javascript:void(0)，当然也给删除标签添加了点击事件由于，这个删除事件是每一行的最优一个单元格都要设置的，所以要“大众化一点”del(this)，this指的就是当前的这个标签。
CSS代码讲解这里还有一个值得我们注意的是，表头的设置，表头是没有添加任何的CSS样式的，是标签“th”,可以直接设置为粗体居中。
<style>
label{
font-family:'Courier New', Courier, monospace;
}
th{
font-weight: bold;
}
style>
JS代码分析因为大部分的样式我都采用了内部样式。所以这里的话我就没有采用很多，
主要就是设置了一个加粗的 *** 作。
<script>
function d1(obj){//删除一整行。
tdnode=obj.parentNode;
trnode=tdnode.parentNode;
tablenode=trnode.parentNode;
var remove=confirm("是否要删除这条信息？");
if(remove){
tablenode.removeChild(trnode);
}
}
function add(){
text1=document.getElementById("t1");
text2=document.getElementById("t2");
text3=document.getElementById("t3");
tableOne=document.getElementById("table1");//通过document对象的getElementById()来获取组件对象的ID
var trNode=document.createElement("tr");
var tdNode1=document.createElement("td");
tdNode1.innerHTML=text1.value;
var tdNode2=document.createElement("td");
tdNode2.innerHTML=text2.value;
var tdNode3=document.createElement("td");
tdNode3.innerHTML=text3.value;
var tdNode4=document.createElement("td");//在第四个格子还要加一个a标签。
var aNode=document.createElement("a");
aNode.innerHTML="删除";
aNode.setAttribute("href","javascript:void(0)");
aNode.setAttribute("onclick","d1(this)");
tdNode4.appendChild(aNode);
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode3);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode4);
tableOne.appendChild(trNode);
}
script>
删除功能这个我们实现的功能就只有两个，一个是对表格中有的数据进行删除的 *** 作，还有就是获取新添加的三个文本框中的数据然后点击添加能够添加到表格中，当进行删除 *** 作时，d出提示框，询问是否删除，如果是就删除，在JS中我们就用到了DOM技术，一切当成节点看待。
function d1(obj){//删除一整行。
tdnode=obj.parentNode;
trnode=tdnode.parentNode;
tablenode=trnode.parentNode;
var remove=confirm("是否要删除这条信息？");
if(remove){
tablenode.removeChild(trnode);
}
}
添加功能这个obj就是调用这个方法的a标签，因为如果要删除那一整行的话，那我们就要找到table这个节点，然后删除那一行，这里就很容易理解了。
function add(){
text1=document.getElementById("t1");
text2=document.getElementById("t2");
text3=document.getElementById("t3");
tableOne=document.getElementById("table1");//通过document对象的getElementById()来获取组件对象的ID
var trNode=document.createElement("tr");//通过DOM技术来创建标签节点，这里是创建的tr节点
var tdNode1=document.createElement("td");//创建td节点，相当于创建一个td标签
tdNode1.innerHTML=text1.value;//设置td里面的标签的值为上面文本框的值，下面的两个设置也是如此。
var tdNode2=document.createElement("td");
tdNode2.innerHTML=text2.value;
var tdNode3=document.createElement("td");
tdNode3.innerHTML=text3.value;
var tdNode4=document.createElement("td");//在第四个格子还要加一个a标签。
var aNode=document.createElement("a");
aNode.innerHTML="删除";
aNode.setAttribute("href","javascript:void(0)");//这里因为删除这个超链接不需要跳转，所以设置的值不为地址。
aNode.setAttribute("onclick","d1(this)");
tdNode4.appendChild(aNode);//将a标签设置为删除那个单元格的子标签。
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode3);
trNode.appendChild(tdNode2);
trNode.appendChild(tdNode4);//把四个td都作为tr的子标签，就是说添加了一行数据。
tableOne.appendChild(trNode);//把上面的那一行再添加到table里面。
总结文本中的注释就是思路，大家结合代码仔细阅读可以理解更深刻。
今天微机课上老师问我们学这么课对我们的作用是什么？当时想了想，如果对于以后找工作来说确实是不会有什么用处的，但是，老师说的一句话，让我感觉到问题不会那么简单，他说：“现在所学的某个东西都会在将来的某个时刻，某个地方派上用场”，这句话大家可能都听过了，但是我结合他的经历，加深了对这句话的理解。下一篇博客我们来讲讲老师的职业道路。😀😁
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）