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>