javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)

更新時(shí)間：2013年12月10日 10:55:41 作者：

利用js來動(dòng)態(tài)創(chuàng)建表格有兩種格式，appendChild()和insertRow、insertCell()。兩種方式其實(shí)差不多，但第一種有可能在IE上有問題，所以推薦大家使用第二種方法，看下面的解決和使用方法

1、inserRow()和insertCell()函數(shù)

insertRow()函數(shù)可以帶參數(shù)，形式如下：

insertRow(index)：index從0開始

這個(gè)函數(shù)將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。默認(rèn)的insertRow()函數(shù)相當(dāng)于insertRow(-1)，將新行添加到表的最后。一般我們?cè)谑褂玫臅r(shí)候都是：objTable.insertRow(objTable.rows.length).就是為表格objTable在最后新增一行。

insertCell()和insertRow的用法相同，這里就不再說了。

2、deleteRow()和deleteCell()方法

deleteRow()函數(shù)可以帶參數(shù)，形式如下：deleteRow(index)：index從0開始

和上面兩個(gè)方法差不多的意思，就是刪除指定位置的行和單元格。要傳入的參數(shù)：Index是行在表格中的位置，可以下面的方法取得然后去刪除：

復(fù)制代碼代碼如下:

var row=document.getElementById("行的Id"); 
var index=row.rowIndex;//有這個(gè)屬性，嘿嘿 
objTable.deleteRow(index);

在使用過程中我碰到的一個(gè)問題跟大家說一下，就是刪除表格的行的時(shí)候，如果你刪除了某一行，那么表格行數(shù)是馬上就變化的，所以如果你要?jiǎng)h除表格的所有行，下面的代碼是錯(cuò)誤的：

復(fù)制代碼代碼如下:

function clearRow(){ 
   objTable= document.getElementById("myTable"); 

   for( var i=1; i<objTable.rows.length ; i++ ) 
   { 
   tblObj.deleteRow(i);    
      } 
}

這段代碼要?jiǎng)h除原來的表格的表體，有兩個(gè)問題。首先不能是deleteRow(i)，應(yīng)該是deleteRow(1)。因?yàn)樵趧h除表格行的時(shí)候，表格的行數(shù)在變化，這就是問題的關(guān)鍵，rows.length總是在變小，刪除的行數(shù)總是會(huì)比預(yù)想的要少一半，所以正確的刪除表格的行的代碼應(yīng)該這樣：

復(fù)制代碼代碼如下:

function clearRow(){ 
   objTable= document.getElementById("myTable"); 
   var length= objTable.rows.length ; 
   for( var i=1; i<length; i++ ) 
   { 
       objTable.deleteRow(i);    
      } 
}

3、動(dòng)態(tài)設(shè)置單元格與行的屬性

A、采用setAttribute()方法，格式如下：setAttribute(屬性，屬性值)

說明：這個(gè)方法幾乎所有的DOM對(duì)象都可以使用，第一個(gè)參數(shù)是屬性的名稱，比如說：border，第二個(gè)就是你要為border設(shè)置的值了，比如：1

復(fù)制代碼代碼如下:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//為表格設(shè)置邊框?yàn)?

其他的比如你要為一個(gè)TD設(shè)置高度，同樣先取得這個(gè)TD對(duì)象，然后使用setAttribute()方法

復(fù)制代碼代碼如下:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//為單元格設(shè)置高度為24

在使用的時(shí)候遇到一個(gè)設(shè)置樣式的問題，不能用setAttribute("class","inputbox2");而應(yīng)該使用setAttribute("className","inputbox2")，呵呵，其他我估計(jì)也有同樣的問題，有些屬性和我們?cè)贒W里面的不一致，呵呵，大家自己摸索吧。

B、直接賦值

復(fù)制代碼代碼如下:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//為表格設(shè)置邊框?yàn)?

這個(gè)方法也全部適用，呵呵。

4、創(chuàng)建表格

了解了行<tr>與單元格<td>的增刪那就可以創(chuàng)建表格了。

第一步：你需要有一個(gè)你去動(dòng)態(tài)變化的表格，我這里講的是已經(jīng)存在頁面的表格，我們要設(shè)置一個(gè)id:myTable

復(fù)制代碼代碼如下:

var objMyTable = document.getElementById("myTable");

第二步：創(chuàng)建行與列的對(duì)象

復(fù)制代碼代碼如下:

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我這里是從倒數(shù)第二行開始新增的

//單元格箱號(hào)
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");

這樣就搞定了，可以簡(jiǎn)單的創(chuàng)建一個(gè)行和列了。具體的代碼我貼在下面。只是很簡(jiǎn)單的例子，不過方法就大概是上面的了，呵呵，慢慢摸索吧~

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>藍(lán)光-BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//添加一行
var newTr = testTbl.insertRow(testTbl.rows.length);
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>

5、appendChild()方法

復(fù)制代碼代碼如下:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>