javascript实现表格增删改操作实例详解

本文实例讲述了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_ = "你确定要删除名字是如下：
"; 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_ + "
"）; } _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?"block":"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?"block":"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?"block":"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?"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><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程序设计有所帮助。