利用原生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重新添加