本文實例講述了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?"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程序設計有所幫助。
新聞熱點
疑難解答
