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="新增" οnclick="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
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
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='取消' οnclick='cancel()' style='display:none'/＞ "+
73
" ＜input type='button' value='儲存' οnclick='save()' style='display:none'/＞" +
74
" ＜input type='button' value='修改' οnclick='edit()' /＞" +
75
" ＜input type='button' value='删除' οnclick='deleteRow()' /＞";
76
77
document.getElementById("txtName").value="";
78
document.getElementById("txtAge").value="";
79
document.getElementById("txtName").focus();
80
}
81
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
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
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
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/lfzwenzhu/archive/2009/07/10/1520591.html
