用DOM动态控制表格

96 阅读 0 评论 64 点赞

我是靠谱客的博主无限乌冬面，这篇文章主要介绍用DOM动态控制表格，现在分享给大家，希望可以做个参考。

复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>用DOM动态控制表格</title>
</head>
<body>
<script language="javascript">
counter = 1;
// 插入数据

function insertData()
{
var oStudentsTable = document.getElementById("students");
var oTrHang = oStudentsTable.insertRow(oStudentsTable.rows.length); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("王" + (counter++));
aText[1] = document.createTextNode("B072");
aText[2] = document.createTextNode("女");
aText[3] = document.createTextNode("1025");
aText[4] = document.createTextNode("13663616963");
for(var i=0; i<aText.length; i++)
{
var oTd = oTrHang.insertCell(i); //插入一个单元格

oTd.appendChild(aText[i]);
}
}
// 编辑单元格数据

function editData()
{
var oTable = document.getElementById("students");
oTable.rows[1].cells[0].innerHTML += "Chf";
}
//添加删除数据的列

function insertDeleteCell()
{
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>操作</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<a href='#' οnclick='myDeleteRow(this)'>Delete</a>";
}
}
//添加拥有一个输入框的列

function insertInputCell() {
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>输入</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<input type="text" style="background:#C0F2F3;margin-left:8px;width:10px;height:10px;" ></oTable>"
}
}
//删除行

function myDeleteRow(theDel)
{
theDel.parentNode.parentNode.parentNode.removeChild(theDel.parentNode.parentNode);
}
//删除所有行

function deleteAllRows()
{
var studentsTable = document.getElementById("students");
while(studentsTable.rows.length > 1)
{
studentsTable.deleteRow(studentsTable.rows.length - 1);
}
}
//对表格的行进行排序

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>用DOM动态控制表格</title>
</head>
<body>
<script language="javascript">
counter = 1;
// 插入数据

function insertData()
{
var oStudentsTable = document.getElementById("students");
var oTrHang = oStudentsTable.insertRow(oStudentsTable.rows.length); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("王" + (counter++));
aText[1] = document.createTextNode("B072");
aText[2] = document.createTextNode("女");
aText[3] = document.createTextNode("1025");
aText[4] = document.createTextNode("13663616963");
for(var i=0; i<aText.length; i++)
{
var oTd = oTrHang.insertCell(i); //插入一个单元格

oTd.appendChild(aText[i]);
}
}
// 编辑单元格数据

function editData()
{
var oTable = document.getElementById("students");
oTable.rows[1].cells[0].innerHTML += "Chf";
}
//添加删除数据的列

function insertDeleteCell()
{
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>操作</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<a href='#' οnclick='myDeleteRow(this)'>Delete</a>";
}
}
//添加拥有一个输入框的列

function insertInputCell() {
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>输入</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<input type="text" style="background:#C0F2F3;margin-left:8px;width:10px;height:10px;" />"
}
}
//删除行

function myDeleteRow(theDel)
{
theDel.parentNode.parentNode.parentNode.removeChild(theDel.parentNode.parentNode);
}
//删除所有行

function deleteAllRows()
{
var studentsTable = document.getElementById("students");
while(studentsTable.rows.length > 1)
{
studentsTable.deleteRow(studentsTable.rows.length - 1);
}
}
//对表格的行进行排序

function sortByBirthday()
{
var studentsTable = document.getElementById("students");
// 获取所有学生数据行
/**
var studentsRowsData = new Array();
for(var i=1; i<studentsTable.rows.length; i++)
{
// 以这种方式获取表格的所有行，但是通过deleteRow方法删除表格的行，会导致获取的行成为空行<tr></tr>
// studentsRowsData[i-1] = studentsTable.rows[i];
}
**/
var studentsRows = new Array();
for(var i=1; i<studentsTable.rows.length; i++)
{
studentsRows[i-1] = studentsTable.rows[i];
}
// ---------- 排序 Begin ----------
for(var i=0; i<studentsRows.length-1; i++)
{
for(var j=i+1; j<studentsRows.length; j++)
{
var iBirth = Number(studentsRows[i].cells[3].firstChild.nodeValue);
var jBirth = Number(studentsRows[j].cells[3].firstChild.nodeValue);
if(iBirth > jBirth)
{
var temp = studentsRows[i];
studentsRows[i] = studentsRows[j];
studentsRows[j] = temp;
}
}
}
// ---------- 排序 End ----------
/**
// 删除表格中的所有学生数据行，保留行首
while(studentsTable.rows.length > 1)
{
studentsTable.deleteRow(studentsTable.rows.length - 1);
}
**/
var studentsSortedTable = document.getElementById("students_sorted");
// 先清空存放排序后学生信息的表格
while(studentsSortedTable.rows.length > 1)
{
studentsSortedTable.deleteRow(studentsSortedTable.rows.length - 1);
}
for(var i=0; i<studentsRows.length; i++)
{
var newRow = studentsSortedTable.insertRow(studentsSortedTable.rows.length);
var sortedCells = studentsRows[i].cells;
for(var j=0; j<sortedCells.length; j++)
{
var newCell = newRow.insertCell(newRow.cells.length);
newCell.innerHTML = sortedCells[j].innerHTML;
}
}
studentsSortedTable.style.display = "inline";
}
</script>
<h3>用DOM动态控制表格</h3>
<input type="button" οnclick="insertData()" value="插入一行数据" />
<input type="button" οnclick="editData()" value="修改单元格数据" />
<input type="button" οnclick="insertDeleteCell()" value="动态添加删除列" />
<input type="button" οnclick="insertInputCell()" value="动态添加输入框列" />
<input type="button" οnclick="deleteAllRows()" value="删除所有行保留行首" />
<input type="button" οnclick="sortByBirthday()" value="按生日进行排序" />
<p></p>
<table id="students" border="1">
<caption>
<h3>学生列表</h3>
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">性别</th>
<th scope="col">生日</th>
<th scope="col">联系方式</th>
</tr>
<tr>
<td>陈</td>
<td>B073</td>
<td>男</td>
<td>1126</td>
<td>15915554615</td>
</tr>
<tr>
<td>王</td>
<td>B071</td>
<td>女</td>
<td>0304</td>
<td>13054115694</td>
</tr>
<tr>
<td>曹</td>
<td>B070</td>
<td>男</td>
<td>0815</td>
<td>1381377894</td>
</tr>
<tr>
<td>郑</td>
<td>B078</td>
<td>男</td>
<td>1019</td>
<td>1322377896</td>
</tr>
</table>
<p></p>
<table id="students_sorted" border="1" style="display:none">
<caption>
<h3>排序后的学生列表</h3>
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">性别</th>
<th scope="col">生日</th>
<th scope="col">联系方式</th>
</tr>
</table>
</body>
</html>