首頁猿問怎么用JS做一個表格的增刪改查

怎么用JS做一個表格的增刪改查

JavaScript

秋風(fēng)已經(jīng)落葉了冬天到來 2017-06-30 15:53:08

查看完整描述

4 回答

慕老板

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

反對回復(fù) 2017-06-30