當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript动态创建表格：新增、删除行和列
生活随笔
收集整理的這篇文章主要介紹了
javascript动态创建表格：新增、删除行和列
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用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" "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>
<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td >第1行</td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value="插入行" οnclick="addRow()" />
</label>
</body>
</html>
5、appendChild()方法
我就直接貼代碼了，大家去研究，時間緊，哈哈，見諒~
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</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" οnclick="addTextBox(this.form,this.parentNode)" />
??? <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</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" οnclick="addTextBox(this.form,this.parentNode)" />
??? <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>?
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" "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>
<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td >第1行</td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value="插入行" οnclick="addRow()" />
</label>
</body>
</html>
5、appendChild()方法
我就直接貼代碼了，大家去研究，時間緊，哈哈，見諒~
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</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" οnclick="addTextBox(this.form,this.parentNode)" />
??? <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</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" οnclick="addTextBox(this.form,this.parentNode)" />
??? <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>?
轉載于:https://www.cnblogs.com/pato/archive/2009/09/02/1559068.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的javascript动态创建表格：新增、删除行和列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ERROR 1093 解决方法
- 下一篇： gradle idea java ssm