以下是純js+html實現的增刪改操作代碼，妳可以參考以下。當然也可以使用jquery之類的框架來實現，最終的原理都是壹樣的。
<html> <head><title>增刪改查</title>
<style?type="">
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的?divif(!checkFlag)?{
f.style.visibility="visible";}else{
f.style.visibility="hidden";}
checkFlag=!checkFlag;
}
//通過保存按鈕將數據添加到表格中
function?insertRow_()?{
switch(optionFlag)?{case?"save"?:
insertRow_$save();
break;
case?"update"?:
insertRow_$update();
break;
default?:
alert("操作失敗。。。");?
} function?insertRow_$save()?{//通過id獲得要添加數據的表格
var?table?=?document.getElementById("tableid"); //將所輸入的內容賦給定義的變量 var?titleName?=?document.getElementById("title").value; var?digestName?=?document.getElementById("digest").value; var?authorName?=?document.getElementById("author").value; //獲取下拉框內的內容 var?selectIndex_?=?document.getElementById("select"); var?option?=?selectIndex_.options[selectIndex_.selectedIndex]; var?selectName?=?option.text; //獲取編號的內容 var?numberid?=?table.rows.length; //在表尾添加壹行數據 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("保存數據成功！！！"); } //修改後的保存 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("修改數據成功。。。"); }}
//通過刪除按鈕?刪除當前所在行
function?delete_(row_)?{
var?table?=?document.getElementById("tableid"); table.deleteRow(row_.rowIndex); refurbish_(); alert("刪除數據成功！！！");}
//刷新
function?refurbish_()?{
var?table?=?document.getElementById("tableid"); //獲得table的行數 var?rows?=?table.rows; for(var?i=1;i<rows.length;i++)?{rows[i].cells[0].innerHTML?=?i;
}}
//通修改按鈕對table裏的數據進行修改
function?update_(row)?{
updateRowIndex?=?row.rowIndex; optionFlag?=?"update"; //對table裏的數據進行回顯 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=100%> <tr?bgcolor="yellow"><th>編號</th>
<th>標題</th>
<th>摘要</th>
<th>作者</th>
<th>類別</th>
<th>操作</th>
</tr> <tr><td>1</td>
<td>dgsdg</td>
<td>sdgfd</td>
<td>ghfhh</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>