第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

查看完整描述

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
  • 4 回答
  • 0 關(guān)注
  • 4612 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號