Home > Article > Web Front-end > Detailed explanation of examples of table addition, deletion and modification operations using javascript_javascript skills
Detailed explanation of examples of table addition, deletion and modification operations using javascript_javascript skills
- WBOYOriginal
- 2016-05-16 15:58:481315browse
The example in this article describes the method of adding, deleting, and modifying tables using JavaScript. Share it with everyone for your reference. The specific implementation method is as follows:
<!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>
I hope this article will be helpful to everyone’s JavaScript programming design.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS form validation plug-in that supports Ajax validation written by myself_javascript skillsNext article：JS form validation plug-in that supports Ajax validation written by myself_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills