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