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="100px;" />
17
年龄:
18
<input id="txtAge" style="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="150px;">
27
姓名
28
</td>
29
<td style="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='100px;' style='display:none'/><span >"+name+"</span>";
69
var objCell = objRow.insertCell(1);
70
objCell.innerHTML="<input type='text' style='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
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

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
