方便增删改查页面写来写去,一次行解决,里面全用Ajax实现交互。
001 |
js夹,myjs0.js代码: |
002 |
function
view(object){ |
003 |
var
table=document.getElementById( "table1" ); |
004 |
table.ondblclick=function(event){ |
005 |
return insert(event); |
006 |
}; |
007 |
table.onclick=updata; |
008 |
var
divfirst=document.getElementById( "divfirst" ); |
009 |
var
table1_tbody=table.lastChild; |
010 |
var
children=table1_tbody.childNodes; |
011 |
if (divfirst.style.display== "none" ){ |
012 |
divfirst.style.display= "" ; |
013 |
object.innerHTML= "-菜单栏" ; |
014 |
for (var
i= 0 ;i<children.length;i++){ |
015 |
if (i== 0 ){ |
016 |
var
td=document.createElement( "td" ); |
017 |
td.innerHTML= "操作栏" ; |
018 |
td.id= "title" ; |
019 |
children[i].appendChild(td); |
020 |
} else if (children[i].nodeName.toLowerCase()
== "tr" ){ |
021 |
var
td=document.createElement( "td" ); |
022 |
td.innerHTML= "<span
style='cursor:pointer;color:#0000AA' onclick='deleteSingle(this)'>删除</span>" ; |
023 |
//td.name="program"; |
024 |
children[i].appendChild(td); |
025 |
} |
026 |
} |
027 |
} else { |
028 |
//保存更改值 |
029 |
var
inserts=document.getElementsByName( "insert" ); |
030 |
if (inserts.length> 0 ){ |
031 |
var
value=document.getElementById( "indextext" ).value; |
032 |
var
td=inserts[ 0 ].parentNode |
033 |
var
id=td.parentNode.id; |
034 |
var
flag= true ; |
035 |
if (value!=inserts[ 0 ].value){ |
036 |
//ajax,得到flag值 |
037 |
value=inserts[ 0 ].value; |
038 |
alert( "我要Ajaxle
" ); |
039 |
} |
040 |
if (flag){ |
041 |
td.innerHTML=value; |
042 |
} |
043 |
} |
044 |
//保存新增的值 |
045 |
var
tbody_last=table1_tbody.lastChild; |
046 |
while ( true ){ |
047 |
if (tbody_last.nodeName.toLowerCase()== "tr" ) break ; |
048 |
tbody_last=tbody_last.previousSibling; |
049 |
} |
050 |
while ( true ){ |
051 |
if (tbody_last.nodeName.toLowerCase()== "tr" &&tbody_last.lastChild.lastChild.innerHTML== "保存" ){ |
052 |
save(tbody_last.lastChild.lastChild); |
053 |
tbody_last=tbody_last.previousSibling; |
054 |
} else { break ;} |
055 |
} |
056 |
|
057 |
|
058 |
for (var
i= 0 ;i<children.length;i++){ |
059 |
if (children[i].nodeName.toLowerCase()
== "tr" ){ |
060 |
children[i].removeChild(children[i].lastChild); |
061 |
} |
062 |
} |
063 |
divfirst.style.display= "none" ; |
064 |
object.innerHTML= "+菜单栏" ; |
065 |
|
066 |
} |
067 |
|
068 |
} |
069 |
|
070 |
function
addrow(){ |
071 |
var
table_tbody=table1().lastChild; |
072 |
|
073 |
var
s=document.getElementsByName( "save" ); |
074 |
if (s.length> 0 ){ |
075 |
var
object=s[ 0 ]; |
076 |
save(object); |
077 |
} |
078 |
|
079 |
var
table_tbody_second=table1().lastChild.firstChild.nextSibling; |
080 |
var
newtr=document.createElement( "tr" ); |
081 |
var
children=table_tbody_second.childNodes; |
082 |
var
mir= 0 ; |
083 |
var
pname=names(); |
084 |
for (var
i= 0 ;i<children.length;i++){ |
085 |
|
086 |
if (children[i].nodeName.toLowerCase()== "td" ){ |
087 |
if (mir==pname.length){ |
088 |
newtr.innerHTML+= "<td><span
style='cursor:pointer;color:#0000AA' onclick='save(this)' name='save'>保存</span></td>" ; |
089 |
} else if (mir== 0 ){ |
090 |
newtr.innerHTML+= "<td></td>" ; //"<input
type='checkbox' name='id'/>" |
091 |
|
092 |
} else { |
093 |
newtr.innerHTML+= "<td><input
type='text' name='" +pname[mir]+ "'/></td>" ; |
094 |
} |
095 |
mir++; |
096 |
} |
097 |
} |
098 |
//table_tbody.insertBefore(table_tbody_second,newtr); |
099 |
table_tbody.appendChild(newtr); |
100 |
//alert(newtr.innerHTML); |
101 |
} |
102 |
|
103 |
function
save(object){ |
104 |
|
105 |
var
tr=object.parentNode.parentNode; |
106 |
var
td=tr.firstChild; |
107 |
var
flag= true ; |
108 |
var
string= "" ; |
109 |
var
id= null ; |
110 |
|
111 |
while (td){ |
112 |
td=td.nextSibling; |
113 |
if (td== null ) break ; |
114 |
var
input=td.firstChild; |
115 |
if (input.nodeName.toLowerCase()== "input" ){ |
116 |
string+=input.name+ ":" +input.value+ "," |
117 |
continue ; |
118 |
} |
119 |
} |
120 |
var
json= "{" +string.substring( 0 ,string.length- 1 )+ "}" ; |
121 |
alert(json) |
122 |
//执行ajax(input.name:input.value)
返回id和其它值,定义一个flag,判读是否再执行后面的句子, |
123 |
if (flag== true ){ |
124 |
td=tr.firstChild; |
125 |
td.innerHTML= "<input
type='checkbox' name='id' value='" +id+ "'/>" ; |
126 |
while (td){ |
127 |
td=td.nextSibling; |
128 |
if (td== null ) break ; |
129 |
var
input=td.firstChild; |
130 |
if (input.nodeName.toLowerCase()== "input" ){ |
131 |
td.innerHTML=input.value; |
132 |
continue ; |
133 |
} |
134 |
if (input.nodeName.toLowerCase()== "span" &&flag== true ){ |
135 |
td.innerHTML= "<span
style='cursor:pointer;color:#0000AA' onclick='deleteSingle(this)'>删除</span>" ; |
136 |
} |
137 |
} |
138 |
} |
139 |
} |
140 |
function
table1(){ |
141 |
return document.getElementById( "table1" ); |
142 |
} |
143 |
function
names(){ |
144 |
var
name = []; |
145 |
var
tr=document.getElementById( "hiddentr" ); |
146 |
var
tr_children=tr.childNodes; |
147 |
for (var
i= 1 ;i<tr_children.length- 1 ;i++){ |
148 |
if (tr_children[i].nodeName.toLowerCase()== "td" ){ |
149 |
name.push(tr_children[i].innerHTML); |
150 |
} |
151 |
} |
152 |
return name; |
153 |
} |
154 |
function
insert(event){ |
155 |
var
evt=window.event||event; |
156 |
var
td=evt.srcElement||evt.target; |
157 |
var
value= null ; |
158 |
if (td.nodeName.toLowerCase()!= "span" &&td.id!= "title" ){ |
159 |
if (td.childNodes.length> 0 ){ |
160 |
//alert(td.firstChild.nodeName.toLowerCase()); |
161 |
if (td.firstChild.nodeName.toLowerCase()!= "span" ){ |
162 |
value=td.innerHTML; |
163 |
td.innerHTML= "<input
type='text' name='insert' value='" +td.innerHTML+ "'/>" ; |
164 |
} |
165 |
} else { |
166 |
value=td.innerHTML; |
167 |
td.innerHTML= "<input
type='text' name='insert' value='" +td.innerHTML+ "'/>" ; |
168 |
} |
169 |
} |
170 |
document.getElementById( "indextext" ).value=value; |
171 |
return value; |
172 |
} |
173 |
function
updata(event){ |
174 |
//alert(value+"bbb")有一个方案还为解决,当单元格数据不变的时候,应该不响应,现在无法获得之前的值..我增加了一个indextext作为比较,无奈之举,顺便做了一个重置 |
175 |
var
evt=window.event||event; |
176 |
var
td=evt.srcElement||evt.target; |
177 |
var
insert=document.getElementsByName( "insert" ); |
178 |
if (insert.length> 0 &&td!=insert[ 0 ]){ |
179 |
var
td=insert[ 0 ].parentNode; |
180 |
var
value=insert[ 0 ].value; |
181 |
var
id=td.parentNode.id; |
182 |
var
flag= true ; |
183 |
if (value!=document.getElementById( "indextext" ).value){ |
184 |
//ajax,得到flag值 |
185 |
alert( "我要Ajaxle
" ); |
186 |
} |
187 |
if (flag){ |
188 |
td.innerHTML=value; |
189 |
} |
190 |
} |
191 |
} |
192 |
function
selectAll(){ |
193 |
var
databox =document.getElementsByName( "id" ); |
194 |
var
lastbox=document.getElementById( "lastbox" ); |
195 |
lastbox.checked=!lastbox.checked; |
196 |
var
flag=lastbox.checked; |
197 |
for (var
i= 0 ;i<databox.length;i++){ |
198 |
databox[i].checked=flag; |
199 |
} |
200 |
} |
201 |
function
inverseselect(){ |
202 |
var
databox =document.getElementsByName( "id" ); |
203 |
for (var
i= 0 ;i<databox.length;i++){ |
204 |
databox[i].checked=!databox[i].checked; |
205 |
} |
206 |
} |
207 |
function
deleteAll(){ |
208 |
var
databox =document.getElementsByName( "id" ); |
209 |
for (var
i= 0 ;i<databox.length;i++){ |
210 |
if (databox[i].checked== true ){ |
211 |
var
id=databox[i].value; |
212 |
//dao
AJAX里面成功删除后再删除节点。这里用来测试端页面 |
213 |
var
tr= databox[i].parentNode.parentNode |
214 |
//或者
var tr=docuemnt.getElementById(databox[i].value); |
215 |
tr.parentNode.removeChild(tr); |
216 |
i--; |
217 |
} |
218 |
} |
219 |
} |
220 |
function
deleteSingle(object){ |
221 |
var
tr=object.parentNode.parentNode; |
222 |
var
id=tr.id; |
223 |
//AJAX里面成功后,再删除节点。这里用来测试端页面 |
224 |
tr.parentNode.removeChild(tr); |
225 |
} |
226 |
function
resetValue(){ |
227 |
var
insert=document.getElementsByName( "insert" ); |
228 |
if (insert.length> 0 ){ |
229 |
insert[ 0 ].value=document.getElementById( 'indextext' ).value; |
230 |
} |
231 |
} |
232 |
|
233 |
234 |
HTML,页面代码: |
235 |
<html> |
236 |
<head> |
237 |
<title>biao1</title> |
238 |
<meta
http-equiv= "Content-Type" content= "text/html;charset=gbk" /> |
239 |
<meta
http-equiv= "pragma" content= "no-cach" /> |
240 |
<script
type= "text/javascript" src= "js/jquery-1.4.4.js" ></script> |
241 |
<script
type= "text/javascript" src= "js/Myjs0.js" ></script> |
242 |
<script> |
243 |
|
244 |
</script> |
245 |
</head> |
246 |
<body> |
247 |
<form
method= "get" action= "#" name= "frm1" > |
248 |
<span
style= "cursor:pointer;color:#0000AA" onclick= "javascript:view(this)" >+菜单栏</span> |
249 |
<div
id= "divfirst" style= "display:none" > |
250 |
<input
type= "checkbox" id= "lastbox" disabled
> |
251 |
<span
style= "
cursor:pointer;color:#0000AA" onclick= "selectAll()" >【全选】</span> |
252 |
<span
style= "cursor:pointer;color:#0000AA" onclick= "inverseselect()" >【反选】</span> |
253 |
<span
style= "
cursor:pointer;color:#0000AA" onclick= "deleteAll()" >【删除】</span> |
254 |
<span
style= "cursor:pointer;color:#0000AA" onclick= "addrow()" >【添加】</span> |
255 |
<span
style= "color:#0000AA" > |
256 |
<input
type= 'text' id= 'indextext' disabled></input> |
257 |
<input
type= 'button' style= "cursor:pointer;color:#0000AA" onclick= "resetValue()" value= "【重置】" /></span> |
258 |
</div> |
259 |
<div> |
260 |
<table
id= "table1" border=1px
style= "border-collapse:collapse;color:#00AA00" > |
261 |
<th
id= "firsttr" name= "firsttr" > |
262 |
<th
width= '153' id= "title" >as</th><th
width= '153' id= "title" >sa</th><th
width= '153' id= "title" >ee</th><th
width= '153' id= "title" >ds</th><th
width= '153' id= "title" >ca</th> |
263 |
</th> |
264 |
<tr
id= "hiddentr" style= "display:none" > |
265 |
<td>id</td><td>name</td><td>age</td><td>gendar</td><td>birthday</td><td>discript</td> |
266 |
</tr> |
267 |
<tr> |
268 |
<td
id= "1_1" ><input
type= "checkbox" name= "id" /></td><td
id= "1_2" > 2 </td><td
id= "1_3" > 3 </td> |
269 |
<td
id= "1_4" > 4 </td><td
id= "1_5" > 5 </td><td
id= "1_6" > 6 </td> |
270 |
</tr> |
271 |
<tr> |
272 |
<td
id= "2_1" ><input
type= "checkbox" name= "id" /></td><td
id= "2_2" ></td><td
id= "2_3" ></td><td
id= "2_4" ></td><td
id= "2_5" ></td><td
id= "1_6" > 6 </td> |
273 |
</tr> |
274 |
</table> |
275 |
</div> |
276 |
</form> |
277 |
</body> |
278 |
</html> |