100字范文 > javascript动态创建表格：新增删除行和列

javascript动态创建表格：新增删除行和列

时间：2021-10-17 08:25:44

利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。

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

另外也可以通过document.getElementById("行的Id").removeNode();来进行删除

在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

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" "/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>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。

javascript动态创建表格：新增 删除行和列

javascript动态创建表格：新增删除行和列