javascript实现表格增删改操作实例详解
本文实例讲述了javascript实现表格增删改操作的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>javascript表格增删改</title>
<scripttype="text/javascript">
var_OTable_=null;
var_oTbody_=null;
var_arrSelect_=newArray;
var_oTempValue_=newObject;
_oTempValue_["$updateIndex"]=-1;
var_TheadName_=newArray("姓名","性别","年龄","籍贯","删除否");
varCELLS_COUNT=_TheadName_.length-1;
String.prototype.trim=function()
{
returnthis.replace(/(^\s*)(\s*$)/g,'');
}
window.onload=function()
{
var$oAdd=document.getElementById("btnAdd");
$oAdd.onclick=function()
{
var_oCol1_=document.getElementById("Col1");
var_oCol2_=document.getElementById("Col2");
var_oCol3_=document.getElementById("Col3");
var_oCol4_=document.getElementById("Col4");
if(!_OTable_)//如果不存在表则新建
{
_OTable_=document.createElement("table");
_OTable_.setAttribute("border","1");
_OTable_.setAttribute("width","800px");
var_Thead_=_OTable_.createTHead();
var_TRow_=_Thead_.insertRow(0);
for(var_headindex_=0;_headindex_<CELLS_COUNT+1;_headindex_++)
{
var_tTh=_TRow_.insertCell(_headindex_);
_tTh.appendChild(document.createTextNode(_TheadName_[_headindex_]));
}
_oTbody_=document.createElement("tbody");
_OTable_.appendChild(_oTbody_);
document.getElementById("TableData").appendChild(_OTable_);
}
if(!_oCol1_.value.trim()){alert("姓名必须填写！");return;}
//添加一行
var_oRow_=_oTbody_.insertRow(-1);
//添加5列，四列值，一列选择
var_oCell1_=_oRow_.insertCell(-1);
_oCell1_.appendChild(document.createTextNode(_oCol1_.value));
var_oCell2_=_oRow_.insertCell(-1);
_oCell2_.appendChild(document.createTextNode(_oCol2_.value));
var_oCell3_=_oRow_.insertCell(-1);
_oCell3_.appendChild(document.createTextNode(_oCol3_.value));
var_oCell4_=_oRow_.insertCell(-1);
_oCell4_.appendChild(document.createTextNode(_oCol4_.value));
_oCol1_.value="";
_oCol2_.value="";
_oCol3_.value="";
_oCol4_.value="";
//选择
var_oCell5_=_oRow_.insertCell(4);
_oCell5_.setAttribute("style","width:50px;");
var_oCheckBox_=document.createElement("input");
_oCheckBox_.setAttribute("type","checkbox");
_oCell5_.appendChild(_oCheckBox_);
_oCheckBox_.onclick=function()
{
if(_oCheckBox_.checked)
{
var_rowIndex_=_oCheckBox_.parentNode.parentNode.rowIndex-1;
_arrSelect_.push(_rowIndex_);
}
}
_oRow_.ondblclick=function()
{
var_oPreUpdateIndex_=_oTempValue_["$updateIndex"];
var_oPreTempRow_=null;
if(parseInt(_oPreUpdateIndex_)!=-1)//原先选定行重置
{
if(!_OTable_||!_oTbody_)return;
_oPreTempRow_=_oTbody_.rows[parseInt(_oPreUpdateIndex_)];
var_cancelornot_=false;
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var$attributeNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var$nodedata_=document.all?$attributeNode_.getAttribute("value"):$attributeNode_.value;
if($nodedata_!=_oTempValue_["$"+_cellindex_])//与原值比较
{
_cancelornot_=confirm("你之前的内容作了修改，保存修改吗？");
break;
}
}
if(_cancelornot_)
{
//避免前次提交为空
var_firstNode_=_oPreTempRow_.cells[0].firstChild;
var$firstnodedata_=_firstNode_.getAttribute("value");
if(!$firstnodedata_||!$firstnodedata_.trim()){alert("姓名不能为空,请重新编辑！");_firstNode_.focus();return;};
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var_oldNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var$nodedata_=document.all?_oldNode_.getAttribute("value"):_oldNode_.value;
var_textnode_=document.createTextNode($nodedata_);
_oPreTempRow_.cells[_cellindex_].replaceChild(_textnode_,_oldNode_);
delete_oTempValue_["$"+_cellindex_];
}
}
else
{
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var_oldNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var_textnode_=document.createTextNode(_oTempValue_["$"+_cellindex_]);
_oPreTempRow_.cells[_cellindex_].replaceChild(_textnode_,_oldNode_);
delete_oTempValue_["$"+_cellindex_];
}
}
}
_oTempValue_["$updateIndex"]=this.rowIndex-1;
//单元格中只有一个文本节点
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var_textbox_=document.createElement("input");
_textbox_.setAttribute("type","text");
var_preNode_=this.cells[_cellindex_].firstChild;
_oTempValue_["$"+_cellindex_]=_preNode_.nodeValue;//记录原先的值
_textbox_.setAttribute("value",_preNode_.nodeValue);
this.cells[_cellindex_].replaceChild(_textbox_,_preNode_);
}
};
};
//删除
var$oDelete=document.getElementById("btnDelete");
$oDelete.onclick=function()
{
if(_arrSelect_.length==0){alert("您还没有选择要删除的行.");return;}
if(_OTable_&&_oTbody_)
{
var_confirmMsg_="你确定要删除名字是如下：\n";
for(varindex=0,iLen=_arrSelect_.length;index<iLen;index++)
{
var_deletName_=_oTbody_.rows[parseInt(_arrSelect_[index])].cells[0].firstChild.nodeValue;
_confirmMsg_=_confirmMsg_.concat(_deletName_+"\n");
}
_confirmMsg_=_confirmMsg_.concat("的信息吗？");
if(!confirm(_confirmMsg_))return;
for(varindex=_arrSelect_.length-1;index>=0;index--)
{
_oTbody_.deleteRow(parseInt(_arrSelect_[index]));
}
}
_arrSelect_.splice(0,_arrSelect_.length);//清空选择列表
};
//更新：（红色部分为更新的代码）
//更新
var$oUpdate=document.getElementById("btnUpdate");
$oUpdate.onclick=function()
{
var_oPreUpdateIndex_=_oTempValue_["$updateIndex"]
if(parseInt(_oPreUpdateIndex_)==-1){alert("您未编辑任何更新行!");return;}
if(_OTable_&&_oTbody_)
{
if(confirm("您确定修改吗？"))
{
var_temprow_=_oTbody_.rows[parseInt(_oPreUpdateIndex_)];
var$namenode=_temprow_.cells[0].firstChild;
var$namenodevalue=document.all?$namenode.getAttribute("value"):$namenode.value;
if(!$namenodevalue||!$namenodevalue.trim()){alert("姓名不能为空,请重新编辑！");$namenode.focus();return;}
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var$tmpnode_=_temprow_.cells[_cellindex_].firstChild;
var$nodedata_=document.all?$tmpnode_.getAttribute("value"):$tmpnode_.value;
var_textnode_=document.createTextNode($nodedata_);
var_oldNode_=_temprow_.cells[_cellindex_].firstChild;
_temprow_.cells[_cellindex_].replaceChild(_textnode_,_oldNode_);
delete_oTempValue_["$"+_cellindex_];
}
}
}
_oTempValue_["$updateIndex"]=-1
};
//查找
var$oFind=document.getElementById("btnFind");
$oFind.onclick=function()
{
if(!_OTable_&&!_oTbody_){alert("目前尚无数据可查！");return;}
///////////////判断之前有编辑未提交的
var_oPreUpdateIndex_=_oTempValue_["$updateIndex"];
var_oPreTempRow_=null;
if(parseInt(_oPreUpdateIndex_)!=-1)//原先选定行重置
{
if(!_OTable_||!_oTbody_)return;
_oPreTempRow_=_oTbody_.rows[parseInt(_oPreUpdateIndex_)];
var_cancelornot_=false;
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var$childNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var$nodedata_=document.all?$childNode_.getAttribute("value"):$childNode_.value;
if($nodedata_!=_oTempValue_["$"+_cellindex_])//与原值比较
{
_cancelornot_=confirm("你之前的内容作了修改，保存修改吗？");
break;
}
}
if(_cancelornot_)
{
//避免前次提交为空
var_firstNode_=_oPreTempRow_.cells[0].firstChild;
var$firstnodedata_=document.all?_firstNode_.getAttribute("value"):_firstNode_.value;
if(!$firstnodedata_||!$firstnodedata_.trim()){alert("姓名不能为空,请重新编辑！");_firstNode_.focus();return;};
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var_oldNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var$nodedata_=document.all?_oldNode_.getAttribute("value"):_oldNode_.value;
var_textnode_=document.createTextNode($nodedata_);
_oPreTempRow_.cells[_cellindex_].replaceChild(_textnode_,_oldNode_);
delete_oTempValue_["$"+_cellindex_];
}
}
else
{
for(var_cellindex_=0;_cellindex_<CELLS_COUNT;_cellindex_++)
{
var_oldNode_=_oPreTempRow_.cells[_cellindex_].firstChild;
var_textnode_=document.createTextNode(_oTempValue_["$"+_cellindex_]);
_oPreTempRow_.cells[_cellindex_].replaceChild(_textnode_,_oldNode_);
delete_oTempValue_["$"+_cellindex_];
}
}
}
//清除更新列表
for(var$obj_in_oTempValue_)
{
delete_oTempValue_[$obj_];
}
//_oTempValue_=newObject;
_oTempValue_["$updateIndex"]=-1;
////////////////////////开始查询
var_$oSelect_=document.getElementById("selectCol");
var_Index_=_$oSelect_.selectedIndex;
var_$oSelectValue_=_$oSelect_.value;
var_$oSelectText_=_$oSelect_.options[_Index_].text;
var_$olike_=document.getElementById("Col9");
var_$rowcollection_=_oTbody_.rows;
var_$rLen=_$rowcollection_.length;
switch(parseInt(_$oSelectValue_))
{
case0:
for(var_rIndex=0;_rIndex<_$rLen;_rIndex++)
{
var_selectrow_=_$rowcollection_[_rIndex];
var$pat=newRegExp(_$olike_.value.trim(),"i");
if(!_$olike_.value.trim()){_selectrow_.style.display=document.all?"block":"table-row";}//如果查询框为空，则全部提取..模糊搜索
else{if(!$pat.test(_selectrow_.cells[0].firstChild.nodeValue.trim())){
_selectrow_.style.display="none";}}
}
break;
case1:
for(var_rIndex=0;_rIndex<_$rLen;_rIndex++)
{
var_selectrow_=_$rowcollection_[_rIndex];
var$pat=newRegExp(_$olike_.value.trim(),"i");
if(!_$olike_.value.trim()){_selectrow_.style.display=document.all?"block":"table-row";}
else
{if(!$pat.test(_selectrow_.cells[1].firstChild.nodeValue.trim()))
{_selectrow_.style.display="none";}}
}
break;
case2:
for(var_rIndex=0;_rIndex<_$rLen;_rIndex++)
{
var_selectrow_=_$rowcollection_[_rIndex];
var$pat=newRegExp(_$olike_.value.trim(),"i");
if(!_$olike_.value.trim()){_selectrow_.style.display=document.all?"block":"table-row";}
else
{if(!$pat.test(_selectrow_.cells[2].firstChild.nodeValue.trim()))
{_selectrow_.style.display="none";}}
}
break;
//更新（红色部分为更新的）
case3:
for(var_rIndex=0;_rIndex<_$rLen;_rIndex++)
{
var_selectrow_=_$rowcollection_[_rIndex];
var$pat=newRegExp(_$olike_.value.trim(),"i");
if(!_$olike_.value.trim()){_selectrow_.style.display=document.all?"block":"table-row";}
else
{if(!$pat.test(_selectrow_.cells[3].firstChild.nodeValue.trim()))
{_selectrow_.style.display="none";}}
}
break;
}
_arrSelect_.splice(0,_arrSelect_.length);//清除删除列表
var_checkBoxList_=document.getElementsByTagName("input");//重置checkbox选择.
for(var_index=0,iLen=_checkBoxList_.length;_index<iLen;_index++)
{
if(_checkBoxList_[_index].type=="checkbox")
{
_checkBoxList_[_index].checked=false;
}
}
};
var$oSelectAll=document.getElementById("btnSelectAll");
$oSelectAll.onclick=function()
{
if(_OTable_&&_oTbody_)
{
var_$rowall_=_oTbody_.rows;
for(var_rIndex=0,_rLen=_$rowall_.length;_rIndex<_rLen;_rIndex++)
{
var_selectrow_=_$rowall_[_rIndex];
_selectrow_.style.display=document.all?"block":"table-row";
}
}
}
}
</script>
</head>
<body>
<fieldset>
<legend>操作Table之增删查改</legend>
<fieldset>
<legend>添加</legend>
<labelfor="Col1">
姓名：
</label>
<inputtype="text"id="Col1"/>
<labelfor="Col2">
性别：
</label>
<inputtype="text"id="Col2"/>
<labelfor="Col3">
年龄：
</label>
<inputtype="text"id="Col3"/>
<labelfor="Col4">
籍贯：
</label>
<inputtype="text"id="Col4"/>
<inputtype="button"value="添加"id="btnAdd"/>
</fieldset>
<fieldset>
<legend>查找</legend>
<labelfor="Col9">
查找内容：
</label>
<scripttype="text/javascript">
varoptions=["<optionvalue=\"0\"selected>姓名</option>","<optionvalue=\"1\">性别</option>","<optionvalue=\"2\">年龄</option>","<optionvalue=\"3\">籍贯</option>"];
document.write("<selectname=\"selectCol\"id=\"selectCol\">"+options.join("")+"</select>");
</script>
<inputtype="text"id="Col9"/>
<inputtype="button"value="查找"id="btnFind"/>
</fieldset>
</fieldset>
<br/>
<fieldsetid="TableData">
<legend>表格数据</legend>
</fieldset>
<inputtype="button"value="删除"id="btnDelete"/>
<inputtype="button"value="更新"id="btnUpdate"/>
<inputtype="button"value="显示全部"id="btnSelectAll"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。