javascript實(shí)現(xiàn)表格增刪改操作實(shí)例詳解
更新時(shí)間:2015年05月15日 10:45:54 作者:永遠(yuǎn)愛(ài)好寫程序
這篇文章主要介紹了javascript實(shí)現(xiàn)表格增刪改操作的實(shí)現(xiàn)方法,以實(shí)例形式較為詳細(xì)的分析了javascript操作表格的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript實(shí)現(xiàn)表格增刪改操作的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!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("你之前的內(nèi)容作了修改,保存修改嗎?"); break; } } if(_cancelornot_) { //避免前次提交為空 var _firstNode_=_oPreTempRow_.cells[0].firstChild; var $firstnodedata_=_firstNode_.getAttribute("value"); if(!$firstnodedata_||!$firstnodedata_.trim()){alert("姓名不能為空,請(qǐng)重新編輯!"); _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; //單元格中只有一個(gè)文本節(jié)點(diǎn) 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("您還沒(méi)有選擇要?jiǎng)h除的行."); return; } if (_OTable_ && _oTbody_) { var _confirmMsg_ = "你確定要?jiǎng)h除名字是如下:\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("姓名不能為空,請(qǐng)重新編輯!"); $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("目前尚無(wú)數(shù)據(jù)可查!");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("你之前的內(nèi)容作了修改,保存修改嗎?"); break; } } if(_cancelornot_) { //避免前次提交為空 var _firstNode_=_oPreTempRow_.cells[0].firstChild; var $firstnodedata_=document.all?_firstNode_.getAttribute("value"):_firstNode_.value; if(!$firstnodedata_||!$firstnodedata_.trim()){alert("姓名不能為空,請(qǐng)重新編輯!"); _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; ////////////////////////開(kāi)始查詢 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";}//如果查詢框?yàn)榭?,則全部提取..模糊搜索 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"> 查找內(nèi)容: </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>表格數(shù)據(jù)</legend> </fieldset> <input type="button" value="刪除" id="btnDelete" /> <input type="button" value="更新" id="btnUpdate" /> <input type="button" value="顯示全部" id="btnSelectAll" /> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
詳談innerHTML innerText的使用和區(qū)別
下面小編就為大家?guī)?lái)一篇詳談innerHTML innerText的使用和區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08教學(xué)演示-UBB,剪貼板,textRange及其他
[紅色]教學(xué)演示-UBB,剪貼板,textRange及其他...2006-11-11sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-02-02JavaScript制作淘寶星級(jí)評(píng)分效果的思路
這篇文章主要介紹了JavaScript制作淘寶星級(jí)評(píng)分效果的整個(gè)思考過(guò)程,思路很清晰,并附帶了完整的程序源碼,感興趣的小伙伴們可以參考一下2015-11-11關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志詳解
這篇文章主要給大家介紹了關(guān)于自定義Egg.js的請(qǐng)求級(jí)別日志的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12