js如何動態建立一個table表格

antzone發表於2017-03-17
原文網址 : https://www.softwhy.com/article-3583-1.html
JS

在實際應用中，可能需要動態建立一個表格，下面就分佈介紹一下使用js如何建立一個表格。

一.insertRow()和insertCell()函式:

insertRow()函式可以插入一個行，語法格式如下:

[JavaScript] 純文字檢視 複製程式碼
insertRow(index)

引數index是從0開始的，規定新行在哪一行的前面插入新行，例如引數是1，就是在第二行的前面插入新行。

在預設情況下，引數是可以省略的，新行會被插入到表格的最後，相當於insertRow(-1)。

insertCell()函式用來插入一個單元格，的用法和insertRow()函式的用法是一個道理，這裡就不多介紹了。

二.deleteRow()和deleteCell()函式:

deleteRow()函式可以刪除指定的行，語法格式如下:

[JavaScript] 純文字檢視 複製程式碼
deleteRow(index)

引數index是規定要刪除行的索引值，從0開始。

deleteCell()函式用來刪除一個單元格，用法和deleteRow()一樣，這裡就不多介紹了。

三.設定行與單元格的屬性:

可以使用setAttribute()函式設定行與單元格的屬性。

完整程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var Count=false;
var NO=1; 
function addRow(obj){ 
  Count=!Count;  
  var newTr=obj.insertRow(obj.rows.length); 
  var newTd0=newTr.insertCell(); 
  var newTd1=newTr.insertCell(); 
  var newTd2=newTr.insertCell(); 
  
  if(Count){
    newTr.style.background="#FFE1FF";
  } 
  else {
    newTr.style.background="#FFEFD5";
  } 
  newTd0.innerHTML='<input type=checkbox />'; 
  NO++ 
  newTd1.innerText="第"+ NO+"行"; 
} 
window.onload=function(){
  var thetable=document.getElementById("thetable");
  var bt=document.getElementById("bt");
   
  bt.onclick=function(){addRow(thetable)}
}
</script>
</head>
<body>
<table width="399" cellspacing="1" id="thetable">
  <tr bgcolor="#FFEFD5">
    <td width=6%><input type=checkbox ></td>
    <td >第1行</td>
    <td ></td>
  </tr>
</table>
<input type="button" value="插入行" id="bt"/>
</body>
</html>

相關文章