本文实例讲述了javascript实现表格增删改操作的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript 表格增删改</title> <script type="text/javascript"> var _OTable_ = null; var _oTbody_ = null; var _arrSelect_ = new Array; var _oTempValue_=new Object; _oTempValue_["$updateIndex"]=-1; var _TheadName_=new Array("姓名","性别","年龄","籍贯","删除否"); var CELLS_COUNT=_TheadName_.length-1; String.prototype.trim=function() { return this.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 (var index = 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 (var index = _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_=new Object; _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_)) { case 0: for(var _rIndex=0;_rIndex<_$rLen;_rIndex++) { var _selectrow_=_$rowcollection_[_rIndex]; var $pat = new RegExp(_$olike_.value.trim(),"i"); if(!_$olike_.value.trim()){_selectrow_.style.display=document.all"table-row";}//如果查询框为空，则全部提取..模糊搜索 else {if(!$pat.test(_selectrow_.cells[0].firstChild.nodeValue.trim())){ _selectrow_.style.display="none";}} } break; case 1: for(var _rIndex=0;_rIndex<_$rLen;_rIndex++) { var _selectrow_=_$rowcollection_[_rIndex]; var $pat = new RegExp(_$olike_.value.trim(),"i"); if(!_$olike_.value.trim()){_selectrow_.style.display=document.all"table-row";} else {if(!$pat.test(_selectrow_.cells[1].firstChild.nodeValue.trim())) {_selectrow_.style.display="none";}} } break; case 2: for(var _rIndex=0;_rIndex<_$rLen;_rIndex++) { var _selectrow_=_$rowcollection_[_rIndex]; var $pat = new RegExp(_$olike_.value.trim(),"i"); if(!_$olike_.value.trim()){_selectrow_.style.display=document.all"table-row";} else {if(!$pat.test(_selectrow_.cells[2].firstChild.nodeValue.trim())) { _selectrow_.style.display="none";}} } break; //更新（红色部分为更新的） case 3: for(var _rIndex=0;_rIndex<_$rLen;_rIndex++) { var _selectrow_=_$rowcollection_[_rIndex]; var $pat = new RegExp(_$olike_.value.trim(),"i"); if(!_$olike_.value.trim()){_selectrow_.style.display=document.all"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"table-row"; } } } } </script> </head> <body> <fieldset> <legend>操作Table之增删查改</legend> <fieldset> <legend>添加</legend> <label for="Col1"> 姓名： </label> <input type="text" id="Col1" /> <label for="Col2"> 性别： </label> <input type="text" id="Col2" /> <label for="Col3"> 年龄： </label> <input type="text" id="Col3" /> <label for="Col4"> 籍贯： </label> <input type="text" id="Col4" /> <input type="button" value="添加" id="btnAdd" /> </fieldset> <fieldset> <legend>查找</legend> <label for="Col9"> 查找内容： </label> <script type="text/javascript"> var options = ["<option value="0" selected>姓名</option>", "<option value="1">性别</option>", "<option value="2">年龄</option>", "<option value="3">籍贯</option>"]; document.write("<select name="selectCol" id="selectCol">" + options.join("") + "</select>"); </script> <input type="text" id="Col9" /> <input type="button" value="查找" id="btnFind" /> </fieldset> </fieldset> <br /> <fieldset id="TableData"> <legend>表格数据</legend> </fieldset> <input type="button" value="删除" id="btnDelete" /> <input type="button" value="更新" id="btnUpdate" /> <input type="button" value="显示全部" id="btnSelectAll" /> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
【javascript实现表格增删改操作实例详解】相关文章：
★ JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
★ JavaScript中的setUTCDate()方法使用详解