纯js增删改查页面

方便增删改查页面写来写去，一次行解决，里面全用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>&nbsp;

249	<div id="divfirst" style="display:none">

250	<input type="checkbox" id="lastbox" disabled >

251	<span style=" cursor:pointer;color:#0000AA"onclick="selectAll()">【全选】</span>&nbsp;

252	<span style="cursor:pointer;color:#0000AA"onclick="inverseselect()">【反选】</span>&nbsp;

253	<span style=" cursor:pointer;color:#0000AA"onclick="deleteAll()">【删除】</span>&nbsp;

254	<span style="cursor:pointer;color:#0000AA"onclick="addrow()">【添加】</span>&nbsp;

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>&nbsp;

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>