javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

时间：2017-02-12 22:25:48 阅读：474 评论：0 收藏：0 [点我收藏+]

jsp页面表格布局
Html代码
<body onload="show()">
<center>
<input type="text" value="111" id="mytext">
<table border="1" width="60%" id="mytable">
<tr>
<td id="td1">第一行第一列</td><td id="td2">第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td><td>第三行第二列</td>
</tr>
</table>
</center>
</body>

js代码
Javascript代码
<script type="text/javascript">
function show(){
// 获取id为 mytext 的普通元素值
var mytext = document.getElementById("mytext").value;

//用标记id的td元素获取值方法
var td1 = document.getElementById("td1").innerHTML;

//用获取table(通过其id ) 获取指定的行，列
var mytable = document.getElementById("mytable").rows[1].cells[2].innerHTML;

//遍历 table表格
var s3 = document.getElementsByTagName("table")[0]; //获取第一个表格

alert(td1); //第一行第一列
alert(mytable); //第二行第三列
for(var i=0;i<s3.rows.length;i++){
for(var j=0;j<s3.rows[i].cells.length;j++){
alert(s3.rows[i].cells[j].innerHTML);
}
}
}
</script>

一、JSON数据源

JSON解释：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,

那么,JSON到底是什么?

JSON就是一串字符串只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

双引号内是属性或值

: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {name: Michael} 可以理解为是一个包含name为Michael的对象

而[{name: Michael},{name: Jerry}]就表示包含两个对象的数组

当然了,你也可以使用{name:[Michael,Jerry]}来简化上面一部,这是一个拥有一个name数组的对象

1.1 students

?
1
2
3
4
5
6
7
8
9
10
11
12
var students = [
{cName: class 1, ID: 1001, name: 李X, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1002, name: 张X威, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1003, name: 于X洋, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1004, name: 张X扬, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1005, name: 周X, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1006, name: 王X, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1007, name: 李X朋, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 1, ID: 1008, name: 邬X春, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 5, ID: 1009, name: 李X, course: [英语, 高数], elective: [政治经济学, 哲学]},
{cName: class 5, ID: 1010, name: 孙X丽, course: [英语, 高数], elective: [政治经济学, 哲学]}
];

二、函数设计

所谓的动态就是使用删表和写表的操作。

2.1 删除表格

删除除了表头之外的数据。

?
1
2
3
4
5
6
7
8
9
CourseInf.deleteTable = function (table) {
var mBody = table.getElementsByTagName(‘tbody‘);

var len = table.rows.length;

for (var i = 1; i < len; i++) {
table.removeChild(mBody[1]);
}
};

2.2 写表格

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
CourseInf.writeTable = function (obj, table) {
var array = [];
var className = obj.value;

var iAcc = 0;
var rowNum = 0;
var str = ;

for (var i = 0; i < CourseInf.gradeArrays.length; i++) {

for (var key in CourseInf.gradeArrays[i]) {
if (CourseInf.gradeArrays[i][key] == className){
CourseInf.flag = true;
rowNum++;
}
else {
if (CourseInf.flag) {
array[key] = CourseInf.gradeArrays[i][key];
}
}

}
CourseInf.flag = false;

if (rowNum != 0) {
for (var j in array) {
str = array[j];
CourseInf.classArrays[iAcc] = str;

iAcc++;
}
CourseInf.insertTable(4, 1, CourseInf.classArrays, table);

}

rowNum = 0;
}

CourseInf.iCount = 0;
};
如果数组中某个键值（cName）等于className则执行：标志为真；并且行数+1操作。

否则，判断标志是否为真？为真读取数据。

?
1
2
3
4
5
6
7
8
9
if (CourseInf.gradeArrays[i][key] == className){
CourseInf.flag = true;
rowNum++;
}
else {
if (CourseInf.flag) {
array[key] = CourseInf.gradeArrays[i][key];
}
}

行数不等于0时，插入表格数据

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CourseInf.insertTable = function (colNum, rowNum, array, table) {
var mBody = document.createElement(tbody);

for (var i = 0; i < rowNum; i++) {
var mTr = document.createElement(tr);

var j = 0;
for (j = 0; j < colNum; j++) {
var mCell = document.createElement(td);
var mText = document.createTextNode(array[j + CourseInf.iCount]);

mCell.appendChild(mText);
mTr.appendChild(mCell);
}
CourseInf.iCount += j;
mBody.appendChild(mTr);
}
table.appendChild(mBody);
};

2.3 删除重复项

我们在读取班级列表的时候，希望一个班级只能出现一次。

所以，我们要处理多个“class 1”和“class 5”的问题。

?
1
2
3
for (var i = 0; i < array.length; i++) {
obj[array[i]] = true;
}
obj[array[i]] = true;

也许这么看就容易懂了obj[key] = true;

附：

dynamicTable.html

?
1

<script type=text/javascript> var students = [ {cName: class 1, ID: 1001, name: 李X, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1002, name: 张X威, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1003, name: 于X洋, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1004, name: 张X扬, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1005, name: 周X, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1006, name: 王X, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1007, name: 李X朋, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 1, ID: 1008, name: 邬X春, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 5, ID: 1009, name: 李X, course: [英语, 高数], elective: [政治经济学, 哲学]}, {cName: class 5, ID: 1010, name: 孙X丽, course: [英语, 高数], elective: [政治经济学, 哲学]} ]; </script><script type=text/javascript src=dynamicTable.js ></script>

学号姓名必修课选修课
dynamicTable.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/*
* 课程信息
* @author xiaobin
*/

var CourseInf = {
gradeArrays : [],
classArrays : [],

iCount : 0,
flag : false,
};

CourseInf.deleteTable = function (table) {
var mBody = table.getElementsByTagName(‘tbody‘);

var len = table.rows.length;

for (var i = 1; i < len; i++) {
table.removeChild(mBody[1]);
}
};

CourseInf.insertTable = function (colNum, rowNum, array, table) {
var mBody = document.createElement(tbody);

for (var i = 0; i < rowNum; i++) {
var mTr = document.createElement(tr);

var j = 0;
for (j = 0; j < colNum; j++) {
var mCell = document.createElement(td);
var mText = document.createTextNode(array[j + CourseInf.iCount]);

mCell.appendChild(mText);
mTr.appendChild(mCell);
}
CourseInf.iCount += j;
mBody.appendChild(mTr);
}
table.appendChild(mBody);
};

CourseInf.writeTable = function (obj, table) {
var array = [];
var className = obj.value;

var iAcc = 0;
var rowNum = 0;
var str = ;

for (var i = 0; i < CourseInf.gradeArrays.length; i++) {

for (var key in CourseInf.gradeArrays[i]) {
if (CourseInf.gradeArrays[i][key] == className){
CourseInf.flag = true;
rowNum++;
}
else {
if (CourseInf.flag) {
array[key] = CourseInf.gradeArrays[i][key];
}
}

}
CourseInf.flag = false;

if (rowNum != 0) {
for (var j in array) {
str = array[j];
CourseInf.classArrays[iAcc] = str;

iAcc++;
}
CourseInf.insertTable(4, 1, CourseInf.classArrays, table);

}

rowNum = 0;
}

CourseInf.iCount = 0;
};

CourseInf.readClasses = function (obj) {
var table = document.getElementById(tb1);

CourseInf.deleteTable(table);
CourseInf.writeTable(obj, table);
};

CourseInf.loadData = function (array) {
var data = [];
var vals = [];

CourseInf.gradeArrays = array;

var obj = document.getElementById(className);

// json 中键值为cName的value值放到数组中
for (var i = 0; i < array.length; i++) {
for (var j in array[i]) {
if (j == cName)
data.push(array[i][j]);
};
}

// 删除重复项
vals = _uniq(data);

// Traverse Array
for (var i = 0; i < vals.length; i++) {
obj.options.add(new Option(vals[i], vals[i]));
};

};

_toObj = function (array) {
var obj = new Array();

for (var i = 0; i < array.length; i++) {
obj[array[i]] = true;
}

return obj;
};

_keys = function (obj) {
var array = new Array();

for (var i in obj) {
if (obj.hasOwnProperty(i)) {
array.push(i);
};
}

return array;
};

_uniq = function (array) {
return _keys(_toObj(array));
};

沈雨萱

这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JavaScript动态改变表格单元格内容的方法。分享给大家供大家参考。具体如下：
JavaScript动态改变表格单元格的内容，下面的代码通过修改单元格的innerHTML来修改单元格内容
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent()
{
var x=document.getElementById(‘myTable‘).rows[0].cells;
x[0].innerHTML="NEW CONTENT";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="Change content">
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。

大衣哥年度 王小源 帅总 囧囧丸

javascript生成表格增删改查

博客分类： j2ee开发
htmljavascriptdom
Html代码收藏代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>增删改查</title>
<style type="text/css">
table{
width:100%;
height:2px;
border:#0C9 1px solid;
border-collapse:collapse;
}
</style>

<script type="text/javascript">

function createTable() {

//创建表
var setTable = document.createElement("table");
//设置表的属性
setTable.setAttribute(‘border‘, ‘1‘);
setTable.setAttribute(‘id‘,‘tableid‘);
setTable.setAttribute(‘cellpadding‘,‘0‘);
setTable.setAttribute(‘cellspacing‘,‘0‘);
setTable.setAttribute(‘width‘,‘100%‘);

var tbody = document.createElement("tbody");
//创建行
var tr = document.createElement("tr");

//创建单元格
var td1 = document.createElement("td");
//设置单元格的内容
var cellContent1 = document.createTextNode("编号");

var td2 = document.createElement("td");
var cellContent2 = document.createTextNode("标题 ");

var td3 = document.createElement("td");
var cellContent3 = document.createTextNode("摘要");

var td4 = document.createElement("td");
var cellContent4 = document.createTextNode("作者");

var td5 = document.createElement("td");
var cellContent5 = document.createTextNode("类别");

var td6 = document.createElement("td");
var cellContent6 = document.createTextNode("操作");

td1.appendChild(cellContent1);
tr.appendChild(td1);
tbody.appendChild(tr);

td2.appendChild(cellContent2);
tr.appendChild(td2);
tbody.appendChild(tr);

td3.appendChild(cellContent3);
tr.appendChild(td3);
tbody.appendChild(tr);

td4.appendChild(cellContent4);
tr.appendChild(td4);
tbody.appendChild(tr);

td5.appendChild(cellContent5);
tr.appendChild(td5);
tbody.appendChild(tr);

td6.appendChild(cellContent6);
tr.appendChild(td6);
tbody.appendChild(tr);

setTable.appendChild(tbody);

//创建新增按钮
var button = document.createElement("input");
button.type="button";
button.value="新增";
button.id="addBtn";
button.onclick=function(){
trdadd();
}
document.getElementById("tableDiv").appendChild(button);
document.getElementById("tableDiv").appendChild(setTable);

//初始化全局变量table
table = document.getElementById("tableid");

/****************
form表单
****************/

//创建form表单
var form = document.createElement("form");
form.setAttribute("id", "formid");

//创建table
var createFormTable = document.createElement("table");
createFormTable.setAttribute("id", "aaid");

var form_table_tbody = document.createElement("tbody");

var form_table_tr1 = document.createElement("tr");
var form_table_tr2 = document.createElement("tr");

//单元格
var form_table_td1 = document.createElement("td");
form_table_td1.setAttribute("colspan", "6");

var form_table_td2 = document.createElement("td");
form_table_td2.setAttribute("colspan", "6");

//单元格内容
var form_table_td1_text = document.createTextNode("标题：");
var form_table_td2_text = document.createTextNode("摘要：");

//创建标题文本框
var text1 = document.createElement("input");
text1.type="text";
text1.id="aid";
text1.size="30";

//创建摘要文本框
var text2 = document.createElement("input");
text2.type="text";
text2.id="bid";
text2.size="30";

form_table_td1.appendChild(form_table_td1_text);
form_table_td1.appendChild(text1);
form_table_tr1.appendChild(form_table_td1);
form_table_tbody.appendChild(form_table_tr1);

form_table_td2.appendChild(form_table_td2_text);
form_table_td2.appendChild(text2);
form_table_tr1.appendChild(form_table_td2);
form_table_tbody.appendChild(form_table_tr1);

//单元格
var form_table_td3 = document.createElement("td");
form_table_td3.setAttribute("colspan", "6");

var form_table_td4 = document.createElement("td");
form_table_td4.setAttribute("colspan", "6");

//单元格内容
var form_table_td3_text = document.createTextNode("作者：");
var form_table_td4_text = document.createTextNode("类型：");

//创建作者文本框
var text3 = document.createElement("input");
text3.type="text";
text3.id="cid";
text3.size="30";

//创建下拉框
var select = document.createElement("select");
select.id="eid";
select.name="myname";

//创建下拉框option
var option1 = document.createElement("option");
option1.value="1";

var option2 = document.createElement("option");
option1.value="2";

var option3 = document.createElement("option");
option1.value="3";

//下拉框显示的值
var value1 = document.createTextNode("证券");
var value2 = document.createTextNode("体育");
var value3 = document.createTextNode("新闻");

//save按钮
var buttonSave = document.createElement("input");
buttonSave.type="button";
buttonSave.value="保存";
buttonSave.id="saveBtn";
buttonSave.onclick=function(){
baocun();
}

//reset按钮
var buttonReset = document.createElement("input");
buttonReset.type="reset";
buttonReset.value="重置";
buttonReset.id="resetBtn";
buttonReset.onclick=function(){
chongzhi();
}

option1.appendChild(value1);
option2.appendChild(value2);
option3.appendChild(value3);
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);

form_table_td3.appendChild(form_table_td3_text);
form_table_td3.appendChild(text3);
form_table_tr2.appendChild(form_table_td3);
form_table_tbody.appendChild(form_table_tr2);

form_table_td4.appendChild(form_table_td4_text);
form_table_td4.appendChild(select);
form_table_tr2.appendChild(form_table_td4);
form_table_tbody.appendChild(form_table_tr2);

createFormTable.appendChild(form_table_tbody);
form.appendChild(createFormTable);
form.appendChild(buttonSave);
form.appendChild(buttonReset);
document.getElementById("fid").appendChild(form);
}

// 新增
function trdadd() {
flag = false;
document.getElementById("fid").style.display = "block"; //控制显示
chongzhi();
document.getElementById("aid").disabled = false; //重新启用

}

//保存
function baocun() {
if (flag == false) {

add(flag);
document.getElementById("fid").style.display = "none";
} else {

add(flag);
document.getElementById("fid").style.display = "none";

}
}

//重置
function chongzhi() {
document.getElementById("formid").reset();
}

//删除
function deleteRow(input) {
var s = input.parentNode.parentNode.rowIndex;
document.getElementById("tableid").deleteRow(s);
var num = document.getElementById("tableid").rows.length;
for ( var i = 1; i < num; i += 1) {
table.rows[i].cells[0].innerHTML = i; //把每行的每一列设为i

}
alert("删除成功！！");
}
</script>

</head>
<body onload="createTable()">

<div id="tableDiv"></div>
<div id="fid" style="display: none"></div>

<script type="text/javascript">
//全局变量
var table = null;
var flag = false;
var getselectrow;
function getNum() {
var haoRow = table.rows[0];
return haoRow.cells.length;
}

//添加方法

function add(flag) {
if (!flag) {
// var num=getNum();
var row = table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
var add1 = row.insertCell(0);
var add2 = row.insertCell(1);
var add3 = row.insertCell(2);
var add4 = row.insertCell(3);
var add5 = row.insertCell(4);
var add6 = row.insertCell(5);

add1.innerHTML = document.getElementById("tableid").rows.length - 1;//不加-1时id从二开始；原因：标题占一个
add2.innerHTML = document.getElementById("aid").value;
add3.innerHTML = document.getElementById("bid").value;
add4.innerHTML = document.getElementById("cid").value;
var tall = document.getElementById("eid");
var index = tall.selectedIndex;// 当前坐标
var option = tall.options[index];
add5.innerHTML = option.text;
add6.innerHTML = "<input type=‘button‘ value=‘修改‘ onclick=‘updateRow(this)‘> <input type=‘button‘ value=‘删除‘ onclick=‘deleteRow(this)‘>";
//alert(num);
alert("添加成功！！");

} else {

var row2 = table.rows[getselectrow];//选中当前行
//把修改后的值设置到对应的文本框中
row2.cells[1].innerHTML = document.getElementById("aid").value;
row2.cells[2].innerHTML = document.getElementById("bid").value;
row2.cells[3].innerHTML = document.getElementById("cid").value;
var pall = document.getElementById("eid");
var index = pall.selectedIndex; //当前坐标
var option = pall.options[index];
row2.cells[4].innerHTML = option.text;

alert("修改成功！！");
}
}

//修改
function updateRow(input) {
flag = true
document.getElementById("aid").disabled = true; //不能启用
document.getElementById("fid").style.display = "block";

var i = input.parentNode.parentNode.rowIndex;

getselectrow = i;
//得到选中行的内容放到文本框
document.getElementById("aid").value = table.rows[i].cells[1].innerHTML;
document.getElementById("bid").value = table.rows[i].cells[2].innerHTML;
document.getElementById("cid").value = table.rows[i].cells[3].innerHTML;

var select = document.getElementById("eid");
var index = select.selectedIndex;// 当前坐标
var option = select.options[index];
option.text = table.rows[i].cells[4].innerHTML;

}
</script>
</body>
</html>

天佑 流氓三金 毕加索 王冕
在网页制作的过程中，有时候需要对表格进行操作，下面是一个简易的表格操作方案：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对表格操作</title>
<style type="text/css">
*{
padding:0px;
margn:0px;
}
table#stuRecordTable{width:600px;margin:40px auto;text-align: center;}
table#stuRecordTable tr{height:30px;}
</style>
<script type="text/javascript">
function $(eleStr){
switch(eleStr.substr(0,1)){
case "#":
return document.getElementById(eleStr.substr(1));
break;
case ".":
return document.getElementsByClassName(eleStr.substr(1));
break;
case "_":
return document.getElementsByName(eleStr.substr(1));
break;
default:
return document.getElementsByTagName(eleStr);
break;
}
}

onload = function(){

doOperator();
}

function doOperator(){

doOperator();

var cs = rs[1].cells; //取到当前行的所有单元格
//alert(cs[1].innerHTML);
}
</script>
</head>
<body>
<table id="stuRecordTable" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>成绩</th>
<th>编辑</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td><input type="button" value="删除" class="del"/>
<input type="button" value="修改" class="update"/></td>
</tr>
<tr>
<td>小红</td>
<td>80</td>
<td><input type="button" value="删除" class="del"/>
<input type="button" value="修改" class="update"/></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="添加" onclick="addRow()"/></td>
</tr>
</table>
</body>
</html>

利用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);
在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：
复制代码代码如下:

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="插入行" onclick="addRow()" />
</label>
</body>
</html>
5、appendChild()方法
复制代码代码如下:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</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" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" onclick="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">

</script>
<style type="text/css">

</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" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
这里写图片描述

结果描述：这里的删除是删除一行的数据，修改也是类似，下面的增加按钮点击后增加的一行新数据中也包含了删除和修改按钮。

javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

标签：经济 read 初始化样式 rtc field 实例 bre org

原文地址：http://www.cnblogs.com/icelab/p/6391938.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

沈雨萱

javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行