利用原生JS做一个班级统计表
实现功能：
1.点击添加建立一行表格
2.点击删除，删除一行表格
3.点击每个单元格可以输入内容，焦点移走的时候保存内容
思路分析：
1.建立简单的HTML的表格
2.通过JS向表格中添加元素
（1）：添加tr td button 等元素
（2）：添加删除按钮
3.通过DOM操作向表格中添加内容
（1）：向每个td中添加点击事件
（2）：向每个td中添加标记
（3）：寻找标记，并在标记的td中添加 input标签
（4）：焦点移除，删除标记，并且重新给每个td加上点击事件
（5）：获取输入的值，并赋值到变量
（6）：将获取的变量输入到td中保存
（7）：向删除按钮添加删除事件，删除自身tr
代码：
//建立简单的HTML表格
<body>
<center>
<table id="tab">
<tr>
<th width="25%">年级</th>
<th width="25%">性别</th>
<th width="25%">姓名</th>
<th width="25%">操作</th>
</tr>
</table>
<button id="but">添加</button>
</center>
</body>
//利用JS向其中添加内容
//定义全局变量
var tabdom="";
var butdom="";
var n=0;
var trdom="";
var tddom="";
var czdom="";
var tdlength="";
var dd="";
var int="";
//初始化
window.onload = function(){
tabdom=document.getElementById("tab");
butdom=document.getElementById("but");
butdom.addEventListener("click",touch);
tabdom.setAttribute("width","50%");
tabdom.setAttribute("border","1");
dd=document.getElementsByTagName("td");
}
//定义添加一行的方法
function touch(){
n++; //设定一个标记，用来区分每个td
trdom=document.createElement("tr"); //利用DOM添加一个TR
trdom.style.height="30px";
tdlength=document.getElementsByTagName("th"); //获取TH标签用来确定TD标签循环的次数
for(var i=0;i<tdlength.length;i++){ //循环添加TD和删除按钮
tddom=document.createElement("td"); //利用DOM添加TD
if(i == tdlength.length-1){ //向最后一个TD中添加删除按钮
czdom=document.createElement("button"); //利用DOM添加一个按钮
czdom.innerHTML="删除"; //向按钮中添加提示文字
czdom.addEventListener("click",del); //添加按钮删除事件
czdom.setAttribute("flage",n); //向按钮添加标记，区分每个按钮
tddom.appendChild(czdom); //将按钮添加到TD
tddom.style.textAlign="center"; //设置按钮的属性，用来区分又按钮的单元格和没有按钮的单元格
}
trdom.appendChild(tddom); //循环箱TR中添加TD
trdom.setAttribute("flage",n); //循环向TR中添加标记
}
tabdom.appendChild(trdom); //循环向表格中添加TR
//给每个TD添加点击事件，用来添加input
dd=document.getElementsByTagName("td");
for(var f=0;f<dd.length;f++){
//alert(dd[f]);
dd[f].addEventListener("click",add);
}
}
function add(){ //添加input事件
var td_a1="";
var td_info=this; //保证this是事件本身不会变化
if(td_info.style.textAlign != ""){ //排除向按钮中添加input标签
return;
}
td_a1=td_info.innerHTML; //获取TD中的内容
int=document.createElement("input"); //添加input标签
int.setAttribute("value",td_a1); //向input中添加内容
int.addEventListener("blur",xiaoshi); //设置焦点移走的事件
int.style.border="none"; //删除边框
tddom .setAttribute("set","set"); //设置标志区分TD
td_info.appendChild(int); //向TD中添加input标签
for(var i=0;i<dd.length;i++){ //找到标记的TD删除点击事件
dd[i].removeEventListener("click",add);
}
}
function xiaoshi(){ .//设置一个取消input的方法
var td_a2=this; //保证this是事件本身不会变化
var int_info=int.getAttribute("value");
if(td_a2.getAttribute("set")=="set"){ //找到标记的TD
td_a2.innerHTML=int_info; //将内容给TD
td_a2.setAttribute("set",""); //清除标记
}
//向每个TD中添加点击事件
dd=document.getElementsByTagName("td");
for(var f=0;f<dd.length;f++){
dd[f].addEventListener("click",add);
}
}
function del(obj){ //定义删除方法
var obj1=this; //保证this是事件本身不会变化
var tr=document.getElementsByTagName("tr");
n=obj1.getAttribute("flage"); //获取标记
for(var i=0;i<tr.length;i++){ //找到标记并执行删除操作
if(n==tr[i].getAttribute("flage")){
tr[i].remove();
}
}
}
易错点注意：
1.注意给删除按钮和TR添加标记，少添加时会引找不到标记而删掉表格
2.注意获取TD标签时不要使用tddom，tddom是添加的，并不是整个单元格的TD，应重新定义TD
3.注意给TD设置标记
4.删除点击事件后应重新给每个TD重新添加
