實例：表格的相關操作：添加行，刪除行，編輯單元格
阿新 • • 發佈：2018-09-29
solid att align button 點擊 btn eat create lur
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匯總</title>
<style>
#tablebox{width: 70%;margin: 0 auto;border-spacing: 0;border-collapse:collapse;table-layout: fixed;}
#tablebox td,#tablebox th{border: 1px solid #ddd;padding: 10px;text-align: center;}
</style>
<script src="js/edit.js"></script>
</head>
<body>
<button id="btn">添加一行</button>
<p>點擊表格可以編輯內容</p>
<table id="tablebox">
<tr>
<th>操作</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</table>
</html>
js代碼：
var box=null,//表格
btn=null,//按鈕
title=[‘姓名‘,‘性別‘,‘年齡‘]; //表頭
window.onload=function(){
init(); //初始化變量
btn.onclick=add_line; //點擊按鈕添加一行
}
//初始化
function init(){
box=document.getElementById(‘tablebox‘); //表格
btn=document.getElementById(‘btn‘); //按鈕
num=box.getElementsByTagName(‘th‘).length; //th的數量，循環次數
}
//添加行
function add_line(){
var tr=document.createElement(‘tr‘); //創建tr
var td=document.createElement(‘td‘); //創建第一個td
td.setAttribute(‘edit‘,‘no‘); //第一個td加屬性
var del=document.createElement(‘button‘); //創建一個button
del.innerHTML=‘刪除‘; //給button添加文字
td.appendChild(del); //把button添加到td中
tr.appendChild(td); //把td添加到tr中
del.onclick=function(){ //給button加事件
this.parentElement.parentElement.remove(); //父節點的父節點，是td，刪除
}
for(var i=1; i<num; i++){ //循環創建td，並添加到tr中
var td=document.createElement(‘td‘);
td.innerHTML=prompt(‘請輸入‘+title[i-1]);
tr.appendChild(td);
}
box.appendChild(tr); //把tr添加到表格中
td_edit(); //td加點擊事件
}
//td加點擊事件
function td_edit(){
var tds=document.getElementsByTagName(‘td‘); //找到所有td
for(var j=0; j<tds.length; j++){
var edit=tds[j].getAttribute(‘edit‘); //獲取td的edit屬性
if(edit!=‘no‘){ //不是第一個"刪除"時
tds[j].setAttribute(‘onclick‘,‘add_input(this)‘); //添加input事件
}
}
}
//添加input
function add_input(obj){
var str=obj.innerHTML; //取到td的內容
obj.innerHTML=‘<input type="text" onblur="add_con(this)" value="‘+str+‘"/>‘; //把td的內容賦值給input，並把input加入td中，並添加一個失去焦點的事件
obj.getElementsByTagName(‘input‘)[0].select(); //input變成選中狀態
obj.removeAttribute(‘onclick‘); //移除td的事件
}
//把編輯後的內容賦值給td
function add_con(obj){
var str=obj.value; //input的value
var this_td=obj.parentElement; //input的父標簽td
this_td.innerHTML=str; //td的內容為value
this_td.setAttribute(‘onclick‘,‘add_input(this)‘); //td加上點擊事件
}
實例：表格的相關操作：添加行，刪除行，編輯單元格