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

随机推荐

caffe基础入门
学的太浅,先放一个别人写的吧,等自己摸清楚回来搞搞. https://blog.csdn.net/cham_3/article/details/72141753
前后端API交互如何保证数据安全性
前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提 ...
Web.sitemap网站导航
全文注释: Web.sitemap导航XML文件,站点地图,功能实现菜单 1.xml的版本1.0 和编码utf-8 2.Url链接 Title显示的标题 Description描述(ToolTip) ...
Asp.Net进阶/值类型与引用类型：复习
什么是值类型? 值类型: 就是非类类型,委托类型,接口类型,string类型的类型称为值类型. 引用类型类型:就是类类型,委托类型,接口类型,string类型称为引用类型. 值类型与引用类型的赋值问题 ...
asp.net core EF code first
以连接mysql数据库为例一安装组件 Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore.Relational Microsof ...
Jsp页面显示时间:<fmt>标签问题
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%> <%@ taglib ...
【JSP】layui+jsp，根据后台数据给复选框默认勾选
1.项目中经常使用复选框,当重复加载,就需要从数据库给复选框一个默认的值了. 2.接下来使用的是JSP中迭代的方法,给复选框绑定值.思路和方法不一定好,仅供参考. <input type=&qu ...
7.nth-of-type | nth-child?【CSS】
举例说明: <ul> <p>111</p> <span>222</span> <li>1</li> <li& ...
thinkPHP中session()方法用法详解
本文实例讲述了thinkPHP中session()方法用法.分享给大家供大家参考,具体如下: 系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 ? ...
一分钟读懂低功耗蓝牙（BLE)连接数据包
一分钟读懂低功耗蓝牙(BLE)连接数据包 1.概述 BLE 连接过程中有三个重要的数据包:SCAN_REQ, SCAN_RSP 和 CONNECT_REQ. SCAN_REQ: 扫描请求,由主设备(M ...

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

沈雨萱

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

随机推荐

热门专题

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

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