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

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

学号姓名必修课选修课
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++) {

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

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()">

//添加方法

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如何动态删除表格某一行的更多相关文章

用 JS（JavaScript ）实现增删改查
JS小例题学习内容: 需求总结: 学习内容: 需求用 JavaScript 实现简单增删改查实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...
javascript相关的增删改查以及this的理解
前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...
JavaScript HTML DOM增删改查
首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...
asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
layui表格增删改查与上传图片+Api
API 控制器1 主要用于增删改查已经反填数据查询 using System; using System.Collections.Generic; using System.Data.SqlClie ...
JavaScript数组：增删改查、排序等
直接上代码 // 数组应用 var peoples = ["Jack","Tom","William","Tod",&q ...
MyBatis SQL 生成方法增删改查
此类根据JAVA实体BEAN生成MYBATIS的接口SQL(mapper) package com.sicdt.sicsign.bill.service.hessian; import java.la ...
SQL Server高速生成SQL增删改查语句
你还在手写程序生成SQL语句吗?你还在为由于马虎出错的SQL语句而感到无语吗?你还在为不知如何表达复杂的SQL语句而纠结吗?假设你的回答为"是".那你就OUT啦.快来试试应用SQL ...
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

随机推荐

Java8系列 (三) Spliterator可分迭代器
本文转载自 jdk8 Stream 解析2 - Spliterator分割迭代器. 概述我们最为常见的流的产生方式是 collection.stream(), 你点开Stream()方法, 他是通过 ...
linux route详细解读
route命令用于显示和操作IP路由表.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现.在Linux系统中,设置路由通常是为了解决以下问题:该Linu ...
ToLua Timer机制
从一个Bug说起: 在内部试玩时发现有个任务的玩家跟随Npc逻辑挂了. telnet连接到出问题的设备上, 开始搞事情这个跟随的逻辑是一个Timer驱动的. 这个Timer在主角创建时就会启动. 一 ...
TR-银行通信相关文档
DMEE配置指南: https://wenku.baidu.com/view/06790649767f5acfa1c7cd73.html F110 DMEE配置: https://wenku.baid ...
Centos7启动流程及systemd中Nginx启动配置
Centos7启动流程: 1.post(Power-On-Self-Test) 加电自检主要实现的功能是检测各个外围硬件设备是否存在而且能够正常运行起来,实现这一自检功能的是固化在主板上的ROM(主 ...
数据库类型对应Java语言类型表
下表列出了基本 SQL Server.JDBC 和 Java 编程语言数据类型之间的默认映射: SQL Server 类型 JDBC 类型 (java.sql.Types) Java 语言类型 big ...
UniChat-软件工程小组-第一次作业-选题
软件工程小组项目文档小组成员:赵有为.张天善.宋春雨.郭凯璐.孙楠.冯韵瑶 Uni-Chat项目文档需求分析Need 日常生活中我们在使用Ubuntu等系统时都会因为QQ等聊天工具对基于Lin ...
git rebase 版本。。变基
git rebase,顾名思义,就是重新定义(re)起点(base)的作用,即重新定义分支的版本库状态.要搞清楚这个东西,要先看看版本库状态切换的两种情况: 我们知道,在某个分支上,我们可以通过git ...
Java中处理接口返回base64编码的图片数据
在做接口测试的时候,某些接口返回的content是一大段加密文字.这种情况下,有可能是返回的图片加密数据,需要将这些数据转换成图片进行保存查看. 例如: 这里,可以看到Content对应的键值开头有“ ...
python3 操作 hive 安装依赖包整理
安装依赖pip install saslpip install thriftpip install thrift-saslpip install PyHive windows安装sasl报错,解决方案 ...

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

沈雨萱

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

随机推荐

热门专题

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

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