为table添加行和列
1
<html xmlns="http://www.w3.org/1999/xhtml" >
2
<head runat="server">
3
<title>AddRow</title>
4
<style type="text/css">
5
.BlackBorder{ background-color:#000; font-size:12px;}
6
.BlackBorder tr{ background-color:#fff;}
7
</style>
8
</head>
9
<body>
10
<form id="form1" runat="server">
11
<div>
12
<table width="400px">
13
<tr>
14
<td>
15
姓名:
16
<input id="txtName" style="width:100px;" />
17
年龄:
18
<input id="txtAge" style="width:50px;" />
19
<input id="txtAdd" type="button" value="新增" onclick="return insertRow()"/>
20
</td>
21
</tr>
22
<tr>
23
<td>
24
<table id="tMemInfo" width="100%" class="BlackBorder" cellpadding="0" cellspacing="1" border="0" style="padding-left:5px;">
25
<tr style=" background-color:#E0E0E0;">
26
<td style="width:150px;">
27
姓名
28
</td>
29
<td style="width:100px;">
30
年龄
31
</td>
32
<td>
33
管理
34
</td>
35
</tr>
36
</table>
37
</td>
38
</tr>
39
</table>
40
41
</div>
42
</form>
43
44
<script type="text/javascript">
45![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
46
function insertRow()
47
{
48
49
var name=document.getElementById("txtName").value;
50
var age=document.getElementById("txtAge").value;
51
52
if(name=="")
53
{
54
alert("請填寫姓名");
55
document.getElementById("txtName").focus();
56
return false;
57
}
58
if(age=="")
59
{
60
alert("請填寫年龄");
61
document.getElementById("txtAge").focus();
62
return false;
63
}
64![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
var myTable=document.getElementById("tMemInfo");
66
var objRow = myTable.insertRow(1);
67
var objCell = objRow.insertCell(0);
68
objCell.innerHTML= "<input type='text' style='width:100px;' style='display:none'/><span >"+name+"</span>";
69
var objCell = objRow.insertCell(1);
70
objCell.innerHTML="<input type='text' style='width:50px;' style='display:none'/><span >"+age+"</span>";
71
var objCell = objRow.insertCell(2);
72
objCell.innerHTML=" <input type='button' value='取消' onclick='cancel()' style='display:none'/> "+
73
" <input type='button' value='儲存' onclick='save()' style='display:none'/>" +
74
" <input type='button' value='修改' onclick='edit()' />" +
75
" <input type='button' value='删除' onclick='deleteRow()' />";
76
77
document.getElementById("txtName").value="";
78
document.getElementById("txtAge").value="";
79
document.getElementById("txtName").focus();
80
}
81![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82
//删除行
83
function deleteRow()
84
{
85
var myTable=document.getElementById("tMemInfo");
86
var trList =myTable.getElementsByTagName("tr");
87
var row = 0;
88
for(var i = 0; i < trList.length ; i++)
89
{
90
if(event.srcElement.parentNode.parentNode == trList[i])
91
row = i;
92
}
93
myTable.deleteRow(row);
94
}
95![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
96
function cancel()
97
{
98
var e=event.srcElement.parentElement.parentElement;
99
e.childNodes[0].childNodes[0].style.display="none";
100
e.childNodes[0].childNodes[1].style.display="";
101
e.childNodes[1].childNodes[0].style.display="none";
102
e.childNodes[1].childNodes[1].style.display="";
103
e.childNodes[2].childNodes[0].style.display="none";
104
e.childNodes[2].childNodes[2].style.display="none";
105
e.childNodes[2].childNodes[4].style.display="";
106
e.childNodes[2].childNodes[6].style.display="";
107
108
}
109![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
110
function save()
111
{
112
var e=event.srcElement.parentElement.parentElement;
113
e.childNodes[0].childNodes[0].style.display="none";
114
e.childNodes[0].childNodes[1].style.display="";
115
e.childNodes[1].childNodes[0].style.display="none";
116
e.childNodes[1].childNodes[1].style.display="";
117
e.childNodes[2].childNodes[0].style.display="none";
118
e.childNodes[2].childNodes[2].style.display="none";
119
e.childNodes[2].childNodes[4].style.display="";
120
e.childNodes[2].childNodes[6].style.display="";
121
e.childNodes[0].childNodes[1].innerHTML=e.childNodes[0].childNodes[0].value;
122
e.childNodes[1].childNodes[1].innerHTML=e.childNodes[1].childNodes[0].value;
123
}
124![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
125
function edit()
126
{
127
var e=event.srcElement.parentElement.parentElement;
128
e.childNodes[0].childNodes[0].style.display="";
129
e.childNodes[0].childNodes[1].style.display="none";
130
e.childNodes[1].childNodes[0].style.display="";
131
e.childNodes[1].childNodes[1].style.display="none";
132
e.childNodes[2].childNodes[0].style.display="";
133
e.childNodes[2].childNodes[2].style.display="";
134
e.childNodes[2].childNodes[4].style.display="none";
135
e.childNodes[2].childNodes[6].style.display="none";
136
e.childNodes[0].childNodes[0].value=e.childNodes[0].childNodes[1].innerHTML;
137
e.childNodes[1].childNodes[0].value=e.childNodes[1].childNodes[1].innerHTML;
138
}
139
</script>
140
</body>
141
</html>
142![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
96
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
97
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
98
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
99
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
100
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
101
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
102
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
103
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
104
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
105
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
106
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
107
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
108
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
109
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
110
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
111
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
112
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
113
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
114
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
115
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
116
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
117
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
118
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
119
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
120
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
121
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
122
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
123
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
124
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
125
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
126
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
127
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
128
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
129
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
130
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
131
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
132
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
133
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
134
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
135
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
136
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
137
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
138
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
139
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
140
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
141
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
142
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
继续追寻。。。。。。