JS表格的動態操作完整示例
阿新 • • 發佈：2020-01-14
本文例項講述了JS表格的動態操作。分享給大家供大家參考，具體如下：
<html>
<head>
<title>js-表格的動態操作</title>
<meta charset="UTF-8"/>
<style type="text/css">
#ta tr{
height: 20px;
}
#t1{
font-weight: bold;
/*align-content: center;*/
/*不能設定文字內容居中*/
}
</style>
<script type="text/javascript">
function delectOper(btn){
//獲取table物件，我們用其進行其對子元素的操作
var ta=document.getElementById("ta")
//獲取其父類物件
var tr=btn.parentNode.parentNode; //我們進行刪除操作是刪除其所在的行，所以我們用兩次parent操作，第一層得到其所在的列(單元格)，再進一層得到其所在的行物件
//執行刪除操作
ta.deleteRow(tr.rowIndex); //進行刪除操作時，我們用父類物件刪除子類物件，
//注：對於div等物件我們可以使用remove方法，但是對於表格的屬性我們利用delete進行操作，而且我們利用他的rowIndex(行號)而不是其id亦或是物件
//我們沒法對每一個行設定一個id所以用這種方法(通過調入物件找到其父類物件)更加的方便
}
function changeOper(n){
// var n=n;
//獲取修改的位置物件
var cell=document.getElementById("cell"+n);
//進行一定的限制(只有是數字的情況下才能進行拼接)
if(!isNaN(Number(cell.innerHTML))){//isNAN如果是true則表示數值不是數字，如果不新增就會產生連續點選修改時出現把原始碼拼接上的情況
//修改物件的型別
cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='changeOper2(this,this.parentNode)'/>" //利用value='"+cell.innerHTML+"'可以實現內容的拼接注意：其內部的值是"+cell.innerHTML+"一個拼接量
//注意格式：在""內部的要用'',//不知道為什麼在內部不能直接把cell和n當引數傳出去，但是可以傳this物件，所以對應的我們利用this，簡介傳出其父物件
} //還有一個bug:當用戶輸入的值是字元(不是數字),其也會進行value的賦值,但是無法再觸發修改按鍵，只能檢索原物件的內容型別，無法檢索使用者的
}
function changeOper2(inp,cell){
//獲取修改位置物件
// var cell=document.getElementById("cell"+n);
//修改物件的型別
cell.innerHTML=inp.value; //通過物件獲得使用者修改獲得value值
}
//明白了：document可以呼叫任何的id,(好比其他都是全域性變數一樣)，但是他的侷限是獲取的方法有限，必須有特定的屬性才能獲取
//document。innerHTML是對其內部的內容進行重寫。
</script>
</head>
<body>
<h3 align="center">表格的動態操作</h3>
<hr />
<table border="1px" id="ta" align="center"> <!--align可以直接把整個表格居中-->
<tr id="t1" align="center">
<td width="200px">Animation</td>
<td width="100px">上映年份</td>
<td width="100px">評分(10分)</td>
<td width="200px">投幣</td>
<td width="200px">操作</td>
</tr>
<tr align="center">
<td>clannad</td>
<td>2008</td>
<td>9.9</td>
<td id="cell2">100</td>
<td>
<input type="button" name="" id="" value="修改" onclick="changeOper(2)"/>
<input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/>
</td>
</tr>
<tr align="center">
<td>月色真美</td>
<td>2017</td>
<td>9.4</td>
<td id="cell3">70</td>
<td>
<input type="button" name="" id="" value="修改" onclick="changeOper(3)"/>
<input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/>
</td>
</tr>
<tr align="center">
<td>境界的彼方</td>
<td>2013</td>
<td>9.4</td>
<td id="cell4">60</td>
<td>
<input type="button" name="" id="" value="修改" onclick="changeOper(4)"/>
<input type="button" name="" id="" value="刪除" onclick="delectOper(this)"/>
</td>
</tr>
</table>
</body>
</html>
執行效果：
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。