Javascript_随手写的一个动态添加删除行的HTC行为组件
1
<!--***************dtable.htc*******************-->
2<method name=addnew><method/>
3<method name=del><method/>
4<method name=lighton><method/>
5<property name=nowrow><property/>
6<property name=overid><property/>
7<property name=myid><property/>
8<property name=color0><property/>
9<property name=color1><property/>
10<ATTACH EVENT=oncontentready ONEVENT=init() />
11<script language=javascript>
12function init()
13
{
14
color0=#f8f4e4; //行间隔色
15 color1=#f0f0e8; //行间隔色
16 myid=0;
17 nowrow=0;
18 overid=1;
19 element.cellSpacing=1;
20 element.cellPadding=1;
21 element.border=0;
22 element.bgColor=#999999; //边框颜色
23 element.delcolor=#FFCC99;//删除按钮颜色
24 element.delcolorover=#6699FF;//删除按钮颜色
25 var baserow=element.rows[0];
26 baserow.bgColor=#d8c8a8; //标题行底色
27 baserow.style.cursor=default;
28 lastrow=element.rows[element.rows.length-1];
29 t=element;
30 initcolor();
31//-----------------开始初始化已经存在的行----------------------
32 for (i=1;i<t.rows.length;i++)
33
{
34 t.rows[i].style.backgroundColor=eval(color+i%2);
35 t.rows[i].attachEvent(onclick,lighton);
36 t.rows[i].style.cursor=default;
37 t.rows[i].cells[0].style.backgroundColor=element.delcolor;
38 t.rows[i].cells[0].style.cursor=hand;
39 t.rows[i].cells[0].attachEvent(onclick,delit);
40 t.rows[i].cells[0].attachEvent(onmouseover,delmouseover);
41 t.rows[i].cells[0].attachEvent(onmouseout,delmouseout);
42
}
43//------------开始备份最后一行为动态表复制元素-----------------
44
45 t.tr_className=lastrow.className;
46 t.tr_cssText=lastrow.style.cssText;
47 t.td_count=lastrow.cells.length;
48 backupEvent(element.rows[element.rows.length-1],TR);
49 for(i=0;i<lastrow.cells.length;i++)
50 {
51 backupEvent(element.rows[element.rows.length-1].cells[+i+],TD+i);
52 t.td_cssText=lastrow.cells[i].style.cssText;
53 eval(t.td_innerHTML+i+=lastrow.cells[i].innerHTML);
54 }
55//-------------------------备份完成----------------------------
56
57
58
}
59function delmouseover()
60{
61 ln=rowid();
62 element.rows[ln].cells[0].style.backgroundColor=element.delcolorover;
63}
64function delmouseout()
65{
66 ln=rowid();
67 element.rows[ln].cells[0].style.backgroundColor=element.delcolor;
68}
69function lighton(line)
70{
71 ln=(line==null||line==[object])?rowid():line;
72 row=element.rows[ln];
73 initcolor();
74 row.style.backgroundColor=#33FFFF;
75 lightcolor(ln);
76 nowrow=ln;
77}
78function delit()
79{
80 ln=rowid();
81 if(element.rows.length!=2)
82 {
83 element.deleteRow(ln);
84 initcolor();
85 }
86}
87function del(line)
88{
89 element.deleteRow(line);
90 initcolor();
91}
92function rowid()
93{
94 row=window.event.srcElement;
95 while(row.tagName!=TR)row=row.parentElement;
96 return(row.rowIndex);
97}
98function initcolor()
99{
100 for (i=1;i<element.rows.length;i++)
101 {
102 element.rows[i].style.backgroundColor=eval(color+i%2);
103 for(j=0;j<element.rows[i].cells.length;j++)
104 {
105 for(k=0;k<element.rows[i].cells[j].childNodes.length;k++)
106 {
107 if(element.rows[i].cells[j].childNodes[k].style!=undefined)
108 element.rows[i].cells[j].childNodes[k].style.backgroundColor=eval(color+i%2);
109 }
110 }
111 }
112}
113function lightcolor(ln)
114{
115 i=ln;
116 element.rows[i].style.backgroundColor=#33FFFF;
117 for(j=0;j<element.rows[i].cells.length;j++)
118 {
119 for(k=0;k<element.rows[i].cells[j].childNodes.length;k++)
120 {
121 if(element.rows[i].cells[j].childNodes[k].style!=undefined)
122 element.rows[i].cells[j].childNodes[k].style.backgroundColor=#33FFFF;
123 }
124 }
125
126}
127function addnew(line)
128{
129 ln=(line==null||line==[object])?element.rows.length:line;
130 element.insertRow();
131 for(i=0;i<element.td_count;i++)
132 {
133 element.rows[ln].insertCell();
134 }
135 element.rows[ln].style.cssText=element.tr_cssText;
136 element.rows[ln].className=element.tr_className;
137 restoreEvent(element.rows[+ln+],TR);
138 cell=element.rows[ln].cells;
139 for(i=0;i<cell.length;i++)
140 {
141 cell[i].innerHTML=eval(element.td_innerHTML+i);
142 cell[i].style.cssText=eval(element.td_cssText+i);
143 restoreEvent(element.rows[+ln+].cells[+i+],TD+i);
144 }
145 initcolor();
146 t=element
147 t.rows[ln].attachEvent(onclick,lighton);
148 t.rows[ln].style.cursor=default;
149 t.rows[ln].cells[0].style.backgroundColor=element.delcolor;
150 t.rows[ln].cells[0].style.cursor=hand;
151 t.rows[ln].cells[0].attachEvent(onclick,delit);
152 t.rows[ln].cells[0].attachEvent(onmouseover,delmouseover);
153 t.rows[ln].cells[0].attachEvent(onmouseout,delmouseout);
154}
155function copyEvent(tfrom,tto,str1,str2,xxx)
156{
157 eval(tto+.+str2+onactivate=+tfrom+.+str1+onactivate);
158 eval(tto+.+str2+onbeforeupdate=+tfrom+.+str1+onbeforeupdate);
159 eval(tto+.+str2+onblur=+tfrom+.+str1+onblur);
160 eval(tto+.+str2+oncellchange=+tfrom+.+str1+oncellchange);
161 eval(tto+.+str2+onchange=+tfrom+.+str1+onchange);
162 eval(tto+.+str2+onclick=+tfrom+.+str1+onclick);
163 eval(tto+.+str2+oncontextmenu=+tfrom+.+str1+oncontextmenu);
164 eval(tto+.+str2+oncontrolselect=+tfrom+.+str1+oncontrolselect);
165 eval(tto+.+str2+oncopy=+tfrom+.+str1+oncopy);
166 eval(tto+.+str2+oncut=+tfrom+.+str1+oncut);
167 eval(tto+.+str2+ondblclick=+tfrom+.+str1+ondblclick);
168 eval(tto+.+str2+ondeactivate=+tfrom+.+str1+ondeactivate);
169 eval(tto+.+str2+ondrag=+tfrom+.+str1+ondrag);
170 eval(tto+.+str2+ondragend=+tfrom+.+str1+ondragend);
171 eval(tto+.+str2+ondragenter=+tfrom+.+str1+ondragenter);
172 eval(tto+.+str2+ondragleave=+tfrom+.+str1+ondragleave);
173 eval(tto+.+str2+ondragover=+tfrom+.+str1+ondragover);
174 eval(tto+.+str2+ondragstart=+tfrom+.+str1+ondragstart);
175 eval(tto+.+str2+ondrop=+tfrom+.+str1+ondrop);
176 eval(tto+.+str2+onerrorupdate=+tfrom+.+str1+onerrorupdate);
177 eval(tto+.+str2+onfilterchange=+tfrom+.+str1+onfilterchange);
178 eval(tto+.+str2+onfocus=+tfrom+.+str1+onfocus);
179 eval(tto+.+str2+onhelp=+tfrom+.+str1+onhelp);
180 eval(tto+.+str2+onkeydown=+tfrom+.+str1+onkeydown);
181 eval(tto+.+str2+onkeypress=+tfrom+.+str1+onkeypress);
182 eval(tto+.+str2+onkeyup=+tfrom+.+str1+onkeyup);
183 eval(tto+.+str2+onmousedown=+tfrom+.+str1+onmousedown);
184 eval(tto+.+str2+onmouseenter=+tfrom+.+str1+onmouseenter);
185 eval(tto+.+str2+onmouseleave=+tfrom+.+str1+onmouseleave);
186 eval(tto+.+str2+onmousemove=+tfrom+.+str1+onmousemove);
187 eval(tto+.+str2+onmouseout=+tfrom+.+str1+onmouseout);
188 eval(tto+.+str2+onmouseup=+tfrom+.+str1+onmouseup);
189 eval(tto+.+str2+onmouseover=+tfrom+.+str1+onmouseover);
190 eval(tto+.+str2+onmove=+tfrom+.+str1+onmove);
191 eval(tto+.+str2+onmoveend=+tfrom+.+str1+onmoveend);
192 eval(tto+.+str2+onmovestart=+tfrom+.+str1+onmovestart);
193 eval(tto+.+str2+onpage=+tfrom+.+str1+onpage);
194 eval(tto+.+str2+onpaste=+tfrom+.+str1+onpaste);
195 eval(tto+.+str2+onresize=+tfrom+.+str1+onresize);
196 eval(tto+.+str2+onresizeend=+tfrom+.+str1+onresizeend);
197 eval(tto+.+str2+onresizestart=+tfrom+.+str1+onresizestart);
198 eval(tto+.+str2+onrowenter=+tfrom+.+str1+onrowenter);
199 eval(tto+.+str2+onrowexit=+tfrom+.+str1+onrowexit);
200 eval(tto+.+str2+onrowsdelete=+tfrom+.+str1+onrowsdelete);
201 eval(tto+.+str2+onrowsinserted=+tfrom+.+str1+onrowsinserted);
202 eval(tto+.+str2+onscroll=+tfrom+.+str1+onscroll);
203 eval(tto+.+str2+onselect=+tfrom+.+str1+onselect);
204 eval(tto+.+str2+onselectstart=+tfrom+.+str1+onselectstart);
205}
206function restoreEvent(tto,str)
207{
208 copyEvent(element,tto,str,,1);
209}
210function backupEvent(tfrom,str)
211{
212 copyEvent(tfrom,element,,str);
213}
214</script>
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234<!--***********************dtable.htm******************************-->
235<LINK href=cb2.css type=text/css rel=stylesheet>
236<style type=text/css>
237 .t{behavior:url(dtable.htc)}
238</style>
239<!-- Start Defining the menu -->
240
241<TABLE class=t id=tableid cellpadding=0 cellspacing=0 border=0>
242<tr>
243 <TD>X</TD>
244 <TD>表格表哥</TD> <TD>表格表哥</TD> <TD>表格表哥</TD> <TD>表格表哥</TD>
245</TR>
246<tr>
247 <TD>X</TD>
248 <TD><INPUT TYPE=text NAME=表格表哥></TD>
249 <TD><SELECT NAME=>表格表哥</SELECT></TD>
250 <TD><INPUT TYPE=radio NAME=></TD>
251 <TD><INPUT TYPE=submit></TD>
252</TR>
253</TABLE>
254<INPUT TYPE=submit onclick=javascript:document.all.tableid.addnew() value=添加一行>
255
<!--***************dtable.htc*******************-->2
<method name=addnew><method/>3
<method name=del><method/>4
<method name=lighton><method/>5
<property name=nowrow><property/>6
<property name=overid><property/>7
<property name=myid><property/>8
<property name=color0><property/>9
<property name=color1><property/>10
<ATTACH EVENT=oncontentready ONEVENT=init() />11
<script language=javascript>12
function init()13
{
14
color0=#f8f4e4; //行间隔色15
color1=#f0f0e8; //行间隔色16
myid=0;17
nowrow=0;18
overid=1;19
element.cellSpacing=1;20
element.cellPadding=1;21
element.border=0;22
element.bgColor=#999999; //边框颜色23
element.delcolor=#FFCC99;//删除按钮颜色24
element.delcolorover=#6699FF;//删除按钮颜色25
var baserow=element.rows[0];26
baserow.bgColor=#d8c8a8; //标题行底色27
baserow.style.cursor=default;28
lastrow=element.rows[element.rows.length-1];29
t=element;30
initcolor();31
//-----------------开始初始化已经存在的行----------------------32
for (i=1;i<t.rows.length;i++)33
{
34
t.rows[i].style.backgroundColor=eval(color+i%2);35
t.rows[i].attachEvent(onclick,lighton);36
t.rows[i].style.cursor=default;37
t.rows[i].cells[0].style.backgroundColor=element.delcolor;38
t.rows[i].cells[0].style.cursor=hand;39
t.rows[i].cells[0].attachEvent(onclick,delit);40
t.rows[i].cells[0].attachEvent(onmouseover,delmouseover);41
t.rows[i].cells[0].attachEvent(onmouseout,delmouseout);42
}43
//------------开始备份最后一行为动态表复制元素----------------- 44
45
t.tr_className=lastrow.className;46
t.tr_cssText=lastrow.style.cssText;47
t.td_count=lastrow.cells.length;48
backupEvent(element.rows[element.rows.length-1],TR);49
for(i=0;i<lastrow.cells.length;i++)50
{51
backupEvent(element.rows[element.rows.length-1].cells[+i+],TD+i);52
t.td_cssText=lastrow.cells[i].style.cssText;53
eval(t.td_innerHTML+i+=lastrow.cells[i].innerHTML);54
}55
//-------------------------备份完成----------------------------56
57
58
}59
function delmouseover()60
{61
ln=rowid();62
element.rows[ln].cells[0].style.backgroundColor=element.delcolorover;63
}64
function delmouseout()65
{66
ln=rowid();67
element.rows[ln].cells[0].style.backgroundColor=element.delcolor;68
}69
function lighton(line)70
{71
ln=(line==null||line==[object])?rowid():line;72
row=element.rows[ln];73
initcolor();74
row.style.backgroundColor=#33FFFF;75
lightcolor(ln);76
nowrow=ln;77
}78
function delit()79
{80
ln=rowid();81
if(element.rows.length!=2)82
{83
element.deleteRow(ln);84
initcolor();85
}86
}87
function del(line)88
{89
element.deleteRow(line);90
initcolor();91
}92
function rowid()93
{94
row=window.event.srcElement;95
while(row.tagName!=TR)row=row.parentElement;96
return(row.rowIndex);97
}98
function initcolor()99
{100
for (i=1;i<element.rows.length;i++)101
{102
element.rows[i].style.backgroundColor=eval(color+i%2);103
for(j=0;j<element.rows[i].cells.length;j++)104
{105
for(k=0;k<element.rows[i].cells[j].childNodes.length;k++)106
{107
if(element.rows[i].cells[j].childNodes[k].style!=undefined)108
element.rows[i].cells[j].childNodes[k].style.backgroundColor=eval(color+i%2);109
}110
}111
}112
}113
function lightcolor(ln)114
{115
i=ln;116
element.rows[i].style.backgroundColor=#33FFFF;117
for(j=0;j<element.rows[i].cells.length;j++)118
{119
for(k=0;k<element.rows[i].cells[j].childNodes.length;k++)120
{121
if(element.rows[i].cells[j].childNodes[k].style!=undefined)122
element.rows[i].cells[j].childNodes[k].style.backgroundColor=#33FFFF;123
}124
}125
126
}127
function addnew(line)128
{129
ln=(line==null||line==[object])?element.rows.length:line;130
element.insertRow();131
for(i=0;i<element.td_count;i++)132
{133
element.rows[ln].insertCell();134
}135
element.rows[ln].style.cssText=element.tr_cssText;136
element.rows[ln].className=element.tr_className;137
restoreEvent(element.rows[+ln+],TR);138
cell=element.rows[ln].cells;139
for(i=0;i<cell.length;i++)140
{141
cell[i].innerHTML=eval(element.td_innerHTML+i);142
cell[i].style.cssText=eval(element.td_cssText+i);143
restoreEvent(element.rows[+ln+].cells[+i+],TD+i);144
}145
initcolor();146
t=element147
t.rows[ln].attachEvent(onclick,lighton);148
t.rows[ln].style.cursor=default;149
t.rows[ln].cells[0].style.backgroundColor=element.delcolor;150
t.rows[ln].cells[0].style.cursor=hand;151
t.rows[ln].cells[0].attachEvent(onclick,delit);152
t.rows[ln].cells[0].attachEvent(onmouseover,delmouseover);153
t.rows[ln].cells[0].attachEvent(onmouseout,delmouseout);154
}155
function copyEvent(tfrom,tto,str1,str2,xxx)156
{157
eval(tto+.+str2+onactivate=+tfrom+.+str1+onactivate);158
eval(tto+.+str2+onbeforeupdate=+tfrom+.+str1+onbeforeupdate);159
eval(tto+.+str2+onblur=+tfrom+.+str1+onblur);160
eval(tto+.+str2+oncellchange=+tfrom+.+str1+oncellchange);161
eval(tto+.+str2+onchange=+tfrom+.+str1+onchange);162
eval(tto+.+str2+onclick=+tfrom+.+str1+onclick);163
eval(tto+.+str2+oncontextmenu=+tfrom+.+str1+oncontextmenu);164
eval(tto+.+str2+oncontrolselect=+tfrom+.+str1+oncontrolselect);165
eval(tto+.+str2+oncopy=+tfrom+.+str1+oncopy);166
eval(tto+.+str2+oncut=+tfrom+.+str1+oncut);167
eval(tto+.+str2+ondblclick=+tfrom+.+str1+ondblclick);168
eval(tto+.+str2+ondeactivate=+tfrom+.+str1+ondeactivate);169
eval(tto+.+str2+ondrag=+tfrom+.+str1+ondrag);170
eval(tto+.+str2+ondragend=+tfrom+.+str1+ondragend);171
eval(tto+.+str2+ondragenter=+tfrom+.+str1+ondragenter);172
eval(tto+.+str2+ondragleave=+tfrom+.+str1+ondragleave);173
eval(tto+.+str2+ondragover=+tfrom+.+str1+ondragover);174
eval(tto+.+str2+ondragstart=+tfrom+.+str1+ondragstart);175
eval(tto+.+str2+ondrop=+tfrom+.+str1+ondrop);176
eval(tto+.+str2+onerrorupdate=+tfrom+.+str1+onerrorupdate);177
eval(tto+.+str2+onfilterchange=+tfrom+.+str1+onfilterchange);178
eval(tto+.+str2+onfocus=+tfrom+.+str1+onfocus);179
eval(tto+.+str2+onhelp=+tfrom+.+str1+onhelp);180
eval(tto+.+str2+onkeydown=+tfrom+.+str1+onkeydown);181
eval(tto+.+str2+onkeypress=+tfrom+.+str1+onkeypress);182
eval(tto+.+str2+onkeyup=+tfrom+.+str1+onkeyup);183
eval(tto+.+str2+onmousedown=+tfrom+.+str1+onmousedown);184
eval(tto+.+str2+onmouseenter=+tfrom+.+str1+onmouseenter);185
eval(tto+.+str2+onmouseleave=+tfrom+.+str1+onmouseleave);186
eval(tto+.+str2+onmousemove=+tfrom+.+str1+onmousemove);187
eval(tto+.+str2+onmouseout=+tfrom+.+str1+onmouseout);188
eval(tto+.+str2+onmouseup=+tfrom+.+str1+onmouseup);189
eval(tto+.+str2+onmouseover=+tfrom+.+str1+onmouseover);190
eval(tto+.+str2+onmove=+tfrom+.+str1+onmove);191
eval(tto+.+str2+onmoveend=+tfrom+.+str1+onmoveend);192
eval(tto+.+str2+onmovestart=+tfrom+.+str1+onmovestart);193
eval(tto+.+str2+onpage=+tfrom+.+str1+onpage);194
eval(tto+.+str2+onpaste=+tfrom+.+str1+onpaste);195
eval(tto+.+str2+onresize=+tfrom+.+str1+onresize);196
eval(tto+.+str2+onresizeend=+tfrom+.+str1+onresizeend);197
eval(tto+.+str2+onresizestart=+tfrom+.+str1+onresizestart);198
eval(tto+.+str2+onrowenter=+tfrom+.+str1+onrowenter);199
eval(tto+.+str2+onrowexit=+tfrom+.+str1+onrowexit);200
eval(tto+.+str2+onrowsdelete=+tfrom+.+str1+onrowsdelete);201
eval(tto+.+str2+onrowsinserted=+tfrom+.+str1+onrowsinserted);202
eval(tto+.+str2+onscroll=+tfrom+.+str1+onscroll);203
eval(tto+.+str2+onselect=+tfrom+.+str1+onselect);204
eval(tto+.+str2+onselectstart=+tfrom+.+str1+onselectstart);205
}206
function restoreEvent(tto,str)207
{208
copyEvent(element,tto,str,,1);209
}210
function backupEvent(tfrom,str)211
{212
copyEvent(tfrom,element,,str);213
}214
</script> 215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!--***********************dtable.htm******************************-->235
<LINK href=cb2.css type=text/css rel=stylesheet>236
<style type=text/css>237
.t{behavior:url(dtable.htc)}238
</style>239
<!-- Start Defining the menu -->240
241
<TABLE class=t id=tableid cellpadding=0 cellspacing=0 border=0>242
<tr>243
<TD>X</TD>244
<TD>表格表哥</TD> <TD>表格表哥</TD> <TD>表格表哥</TD> <TD>表格表哥</TD>245
</TR>246
<tr>247
<TD>X</TD>248
<TD><INPUT TYPE=text NAME=表格表哥></TD>249
<TD><SELECT NAME=>表格表哥</SELECT></TD>250
<TD><INPUT TYPE=radio NAME=></TD>251
<TD><INPUT TYPE=submit></TD>252
</TR>253
</TABLE>254
<INPUT TYPE=submit onclick=javascript:document.all.tableid.addnew() value=添加一行>255
浙公网安备 33010602011771号