怎么用JS做一個表格的增刪改查
秋風(fēng)已經(jīng)落葉了冬天到來
2017-06-30 15:53:08
TA貢獻14條經(jīng)驗 獲得超27個贊
我只是復(fù)制上面這位同學(xué)的代碼看看能不能運行
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"> <html> ??<head> ??<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/> ????<title>表格記錄增刪改查</title> ????<style?type="javaScript"> ???????tr{ ?????????text-align:center; ???????} ????</style> ??? ????<script?type="text/javascript"> ???????//通過新增按鈕來控制表格的顯示與隱藏 ???????var?optionFlag?=?"save"; ???????var?updateRowIndex?=?-1; ???????var?checkFlag=false;//默認為不顯示 ???????function?show()?{ ?????????optionFlag?=?"save"; ?????????var?f?=?document.getElementById("did");//獲得id為did的?div ???????????if(!checkFlag)?{ ??????????????f.style.visibility="visible"; ???????????}else{ ??????????????f.style.visibility="hidden"; ???????????} ???????????checkFlag=!checkFlag; ???????} ?????? ???????//通過保存按鈕將數(shù)據(jù)添加到表格中 ???????function?insertRow_()?{ ?????????switch(optionFlag)?{ ????????????case?"save"?: ???????????????insertRow_$save(); ???????????????break; ????????????case?"update"?: ???????????????insertRow_$update(); ???????????????break; ????????????default?: ???????????????alert("操作失?。?!");? ?????????} ???????? ?????????function?insertRow_$save()?{ ????????????//通過id獲得要添加數(shù)據(jù)的表格 ??????????var?table?=?document.getElementById("tableid"); ????????? ??????????//將所輸入的內(nèi)容賦給定義的變量 ??????????var?titleName?=?document.getElementById("title").value; ??????????var?digestName?=?document.getElementById("digest").value; ??????????var?authorName?=?document.getElementById("author").value; ??????????//獲取下拉框內(nèi)的內(nèi)容 ??????????var?selectIndex_?=?document.getElementById("select"); ??????????var?option?=?selectIndex_.options[selectIndex_.selectedIndex]; ??????????var?selectName?=?option.text; ????????? ??????????//獲取編號的內(nèi)容 ??????????var?numberid?=?table.rows.length; ????????? ??????????//在表尾添加一行數(shù)據(jù) ??????????var?row_?=?table.insertRow(table.rows.length); ? ??????????row_.insertCell(0).innerHTML?=?numberid; ??????????row_.insertCell(1).innerHTML?=?titleName; ??????????row_.insertCell(2).innerHTML?=?digestName; ??????????row_.insertCell(3).innerHTML?=?authorName; ??????????row_.insertCell(4).innerHTML?=?selectName; ??????????row_.insertCell(5).innerHTML?=?'<input?type="button"?value="修改"?onclick="update_(this.parentNode.parentNode)"></input> <input?type="button"?value="刪除"?onclick="delete_(this.parentNode.parentNode)"></input>'; ????????? ??????????document.getElementById("title").value?=?""; ??????????document.getElementById("digest").value?=?""; ??????????document.getElementById("author").value?=?""; ??????????document.getElementById("select").options[0].selected="true"; ????????? ??????????var?f?=?document.getElementById("did"); ??????????f.style.visibility="hidden"; ????????? ??????????alert("insert數(shù)據(jù)成功!!"); ?????????} ?????????//修改后的保存 ?????????var?tr; ?????????function?insertRow_$update()?{ ?????????????var?table?=?document.getElementById("tableid"); ?????????????tr?=?table.rows[updateRowIndex]; ???????????? ?????????????var?p?=?document.getElementById("title"); ?????????????tr.cells[1].innerHTML?=?p.value; ???????????? ?????????????p?=?document.getElementById("digest"); ?????????????tr.cells[2].innerHTML?=?p.value; ???????????? ?????????????p?=?document.getElementById("author"); ?????????????tr.cells[3].innerHTML?=?p.value; ???????????? ?????????????p?=?document.getElementById("select"); ?????????????var?Index_?=?p.selectedIndex; ?????????????var?option?=?p.options[Index_]; ?????????????var?selectName?=?option.text; ?????????????tr.cells[4].innerHTML?=?selectName; ???????????? ?????????????document.getElementById("title").value?=?""; ??????????document.getElementById("digest").value?=?""; ??????????document.getElementById("author").value?=?""; ??????????document.getElementById("select").options[0].selected="true"; ???????????? ?????????????var?f?=?document.getElementById("did"); ?????????????f.style.visibility="hidden"; ???????????? ?????????????alert("update數(shù)據(jù)成功!!"); ?????????} ???????} ?????? ???????//通過刪除按鈕??刪除當前所在行 ???????function?delete_(row_)?{ ?????????var?table?=?document.getElementById("tableid"); ?????????table.deleteRow(row_.rowIndex); ???????? ?????????refurbish_(); ?????????alert("delete數(shù)據(jù)成功??!"); ???????} ?????? ???????//刷新 ???????function?refurbish_()?{ ?????????var?table?=?document.getElementById("tableid"); ?????????//獲得table的行數(shù) ?????????var?rows?=?table.rows; ?????????for(var?i=1;i<rows.length;i++)?{ ???????????rows[i].cells[0].innerHTML?=?i; ?????????} ???????} ?????? ???????//通修改按鈕對table里的數(shù)據(jù)進行修改 ???????function?update_(row)?{ ?????????updateRowIndex?=?row.rowIndex; ?????????optionFlag?=?"update"; ?????????//對table里的數(shù)據(jù)進行回顯 ?????????document.getElementById("title").value?=?row.cells[1].innerHTML; ?????????document.getElementById("digest").value?=?row.cells[2].innerHTML; ?????????document.getElementById("author").value?=?row.cells[3].innerHTML; ?????????var?selectText?=?row.cells[4].innerHTML; ?????????var?sel?=?document.getElementById("select"); ?????????var?ops?=?sel.options; ?????????for(var?i=0;i<ops.length;i++)?{ ????????????if(selectText==ops[i].text)?{ ???????????????sel.options[i].selected?=?"true";? ????????????} ?????????} ?????????var?f?=?document.getElementById("did"); ?????????f.style.visibility="visible"; ???????} ????</script> ??</head> ? ??<body> ????<input?type="button"?value="新增"?onclick="show()"></input> ????<div> ??????<table?border?=?"1"?cellspacing?=?"0"?id="tableid"??width="90%"> ?????????<tr?bgcolor="yellow"> ????????????<th>編號</th> ????????????<th>名稱</th> ????????????<th>代碼</th> ????????????<th>機構(gòu)</th> ????????????<th>類別</th> ????????????<th>操作</th> ?????????</tr> ?????????<tr> ????????????<td>1</td> ????????????<td>民生寶</td> ????????????<td>100021</td> ????????????<td>ms</td> ????????????<td>基金</td> ????????????<td> ???????????????<input?type="button"?value="修改"?onclick="update_(this.parentNode.parentNode)"></input> ???????????????<input?type="button"?value="刪除"?onclick="delete_(this.parentNode.parentNode)"></input> ????????????</td> ?????????</tr> ?????</table> ????</div> ?<br> ????<div?align="center"?id="did"?style="visibility:hidden"> ???????<form?action=""> ?????????<table> ??????????<tr> ??????<td>標題:</td> ??????<td><input?type="text"?id="title"></input></td> ??????<td>摘要:</td> ??????<td><input?type="text"?id="digest"></input></td> ????</tr> ?? ????<tr> ??????<td>作者:</td> ??????<td><input?type="text"?id="author"></input></td> ??????<td>類別:</td> ??????<td?align="left"> ???????<select?id="select"> ??????????<option>證劵</option> ??????????<option>基金</option> ??????????<option>股票</option> ???????</select> ??????</td> ????</tr> ???</table> ???<br>?? ??????<center> ?????????<input?type="button"?value="保存"?onclick="insertRow_()"></input> ?????????<input?type="reset"?value="重置"></input> ??????</center> ??????</form> ???</div> ?</body> </html>
舉報