javascript 動態建立表格：新增、刪除行和單元格

時間 2019-11-11

標籤 javascript 動態建立表格新增刪除單元格欄目 JavaScript 简体版

原文原文鏈接

利用js來動態建立表格有兩種格式，appendChild()和insertRow、insertCell()。兩種方式其實差很少，但第一種有可能在IE上有問題，因此推薦你們使用第二種了，直接說吧。 html

一、inserRow()和insertCell()函數 app

insertRow()函數能夠帶參數，形式以下：函數

insertRow(index)：index從0開始 ui

這個函數將新行添加到index的那一行前，好比insertRow(0),是將新行添加到第一行以前。默認的insertRow()函數至關於insertRow(-1)，將新行添加到表的最後。通常咱們在使用的時候都是：objTable.insertRow(objTable.rows.length).就是爲表格objTable在最後新增一行。 spa

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

二、deleteRow()和deleteCell()方法 htm

deleteRow()函數能夠帶參數，形式以下：deleteRow(index)：index從0開始對象

和上面兩個方法差很少的意思，就是刪除指定位置的行和單元格。要傳入的參數：Index是行在表格中的位置，能夠下面的方法取得而後去刪除： ip

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

在使用過程當中我碰到的一個問題跟你們說一下，就是刪除表格的行的時候，若是你刪除了某一行，那麼表格行數是立刻就變化的，因此若是你要刪除表格的全部行，下面的代碼是錯誤的：

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

三、動態設置單元格與行的屬性

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

這個方法也所有適用，呵呵。

四、建立表格

瞭解了行<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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>藍光-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();
//設置列內容和屬性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。