這份代碼實現了對表格的增加，刪除，更改，查詢。
點擊一次添加按鈕，表格會增加一行。
點擊重置按鈕，輸入框的內容會被清空。
添加一行后，最后兩格為更改和刪除。點擊更改，原有內容會各自顯示在一個輸入框內，此時更改二字變為保存，更改內容后，點擊保存，內容又呈現不可更改狀態，保存二字又變為修改；點擊刪除，刪除本行。
在搜索框里輸入對應文本，點擊搜索，表格內匹配的文本背景變為其他顏色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的增刪改查</title>
<style>
table {
text-align: center;
border-collapse: collapse;
border: 1px solid gray;
}
#tr1 {
background: #99d6ff;
}
a {
text-decoration: none;
color: black;
}
</style>
<script>
window.onload=function()
{var res = document.getElementById('res')
var oTab=document.getElementById('table1')
var oName=document.getElementById('name')
var oAge=document.getElementById('age')
var oBtn=document.getElementById('btn')
var oSearch=document.getElementById('search')
var oSearchBtn=document.getElementById('searchBtn')
var id=oTab.tBodies[0].rows.length//定義序號變量
oBtn.onclick=function()
{
var oTr=document.createElement('tr')
var oTd=document.createElement('td')
oTd.innerHTML=id++
oTr.appendChild(oTd)
var oTd=document.createElement('td')
oTd.innerHTML=oName.value
oTr.appendChild(oTd)
var oTd=document.createElement('td')
oTd.innerHTML=oAge.value
oTr.appendChild(oTd)
var td3=document.createElement('td');
oTr.appendChild(td3);
td3.innerHTML= '更改';
td3.style.cursor = 'pointer';
td3.onclick = function(){
var ce = this.parentNode.cells;
if (/.*更改.*/.test(td3.innerHTML)){
for( var i = 0; i < ce.length - 2; i++) {
var txt = document.createElement('input');
txt.type = 'text';
var ci = ce[i];
txt.value =ci.innerHTML;
ci.innerHTML = ' ';
ci.appendChild(txt);
}
td3.innerHTML= '保存';
}
else{
for( var i = 0; i < ce.length - 2; i++){
var ci = ce[i];
ci.innerHTML = ci.children[0].value;
}
td3.innerHTML= '更改';
}
}//更改
var oTd=document.createElement('td')
oTd.innerHTML='<a href="#">刪除</a>'
oTr.appendChild(oTd)//添加表格行
oTd.getElementsByTagName('a')[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode)
}//刪除表格行
oTab.tBodies[0].appendChild(oTr)
}
oSearchBtn.onclick=function()
{
for( var i=0; i<oTab.tBodies[0].rows.length; i++)
{
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
var sTxt=oSearch.value.toLowerCase()
var attr=sTxt.split('')
oTab.tBodies[0].rows[i].style.background=''
for( var j=0; j<attr.length; j++)
{
if(sTab.search(attr[j])!=-1)
{
oTab.tBodies[0].rows[i].style.background='#99d6ff';
}
}
}
}//模糊搜索，多關鍵字搜索
res.onclick= function () {
document.getElementById('form').reset();
//重置
}
}
</script>
</head>
<body>
<form id="form">
name：<input type="text" id="name" placeholder="請輸入姓名">
age：<input type="text" id="age" placeholder="請輸入年齡">
</form>
<br>
<input type="reset" id='res'>
<input id="btn" type="button" value="添加"><br><br>
<input type="text" id="search" placeholder="請輸入你的姓名">
<input type="button" id="searchBtn" value="搜索"><br><br>
<table id="table1" border="1" width="800px">
<tr id="tr1">
<td>ID</td>
<td>name</td>
<td>age</td>
<td>change</td>
<td>delete</td>
</tr>
</table>
</body>
</html>