javascript如何建立表格(javascript繪製表格的二種方法)

作者：Eve Cole 更新時間：2025-01-28 04:00:02

1、inserRow()和insertCell()函數

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

insertRow(index)：index從0開始

這個函數將新行加入index的那一行前，例如insertRow(0),是將新行加入第一行之前。預設的insertRow()函數相當於insertRow(-1)，將新行加入表的最後。一般我們在使用的時候都是：objTable.insertRow(objTable.rows.length).就是為表格objTable在最後新增一行。

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

2、deleteRow()和deleteCell()方法

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

和上面兩個方法差不多的意思，就是刪除指定位置的行和儲存格。要傳入的參數：Index是行在表格中的位置，可以用下面的方法取得然後去刪除：

複製代碼代碼如下:

var row=document.getElementById("行的Id");

var index=row.rowIndex;//有這個屬性，嘿嘿

objTable.deleteRow(index);

在使用過程中我碰到的一個問題跟大家說一下，就是刪除表格的行的時候，如果你刪除了某一行，那麼表格行數是馬上就變化的，所以如果你要刪除表格的所有行，下面的程式碼是錯誤的：

複製代碼代碼如下:

function clearRow(){

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

這段程式碼要刪除原來的表格的表體，有兩個問題。首先不能是deleteRow(i)，應該是deleteRow(1)。因為在刪除表格行的時候，表格的行數在變化，這就是問題的關鍵，rows.length總是在變小，刪除的行數總是會比預想的要少一半，所以正確的刪除表格的行的程式碼應該是這樣：

複製代碼代碼如下:

function clearRow(){

objTable= document.getElementById("myTable");

var length= objTable.rows.length ;

for( var i=1; i<length; i++ )

{

objTable.deleteRow(i);

}

3.動態設定單元格與行的屬性

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

說明：這個方法幾乎所有的DOM物件都可以使用，第一個參數是屬性的名稱，比如說：border，第二個就是你要為border設定的值了，例如：1

複製代碼代碼如下:

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

objMyTable.setAttribute("border",1);//為表格設定邊框為1

其他的例如你要為一個TD設定高度，同樣先取得這個TD對象，然後再使用setAttribute()方法

複製代碼代碼如下:

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

objCell.setAttribute("height",24);//為儲存格設定高度為24

在使用的時候遇到一個設定樣式的問題，不能用setAttribute("class","inputbox2");而應該使用setAttribute("className","inputbox2")，呵呵，其他我估計也有同樣的問題，有些屬性和我們在DW裡面的不一致，呵呵，大家自己摸索吧。

B、直接賦值

複製代碼代碼如下:

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

objMyTable.border=1;//為表格設定邊框為1

這個方法也全部適用，呵呵。

4.建立表格

了解了行<tr>與儲存格<td>的增刪那就可以建立表格了。

第一步：你需要有一個你去動態變化的表格，我這裡講的是已經存在頁面的表格，我們要設定一個id:myTable

複製代碼代碼如下:

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

第二步：建立行與列的對象

複製代碼代碼如下:

var index = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//要新增的行，我這裡是從倒數第二行開始新增的

//單元格箱號

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

這樣就搞定了，可以簡單的創建一個行和列了。具體的程式碼我貼在下面。只是很簡單的例子，不過方法大概是上面的了，呵呵，慢慢摸索吧~

複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>藍光-BlueShine</title>

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();

//設定列內容和屬性

if(Count){newTr.style.background="#FFE1FF";}

else {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

NO++

newTd1.innerText="第"+ NO+"行";

}

</script>

</head>

<body>

</tr>

</table>

<label>

</label>

</body>

</html>

5、appendChild()方法

複製代碼代碼如下:

<html>

<head>

<!--

var textNumber = 1;

function addTextBox(form, afterElement) {

// Increment the textbox number

textNumber++;

// Create the label

var label = document.createElement("label");

// Create the textbox

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Add the label's text

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// Put the textbox inside

label.appendChild(textField);

// Add it all to the form

form.insertBefore(label,afterElement);

return false;

}

function removeTextBox(form) {

if (textNumber > 1) { // If there's more than one text box

// Remove the last one added

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

label {

display:block;

margin:.25em 0em;

}

-->

</style>

</head>

<body>

<p>

</p>

</form>

</body>

</html>

<html>

<head>

<!--

var textNumber = 1;

function addTextBox(form, afterElement) {

// Increment the textbox number

textNumber++;

// Create the label

var label = document.createElement("label");

// Create the textbox

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Add the label's text

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// Put the textbox inside

label.appendChild(textField);

// Add it all to the form

form.insertBefore(label,afterElement);

return false;

}

function removeTextBox(form) {

if (textNumber > 1) { // If there's more than one text box

// Remove the last one added

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

label {

display:block;

margin:.25em 0em;

}

-->

</style>

</head>

<body>

<p>

</p>

</form>

</body>

</html>