javascript实现表格增删改操作实例详解
作者：永远爱好写程序 发布时间：2024-04-29 13:24:36
标签：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_ = "你确定要删除名字是如下：\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程序设计有所帮助。
0
投稿猜你喜欢
- 前言MySQL 的权限表在数据库启动的时候就载入内存，当用户通过身份认证后，就在内存中进行相应权限的存取，这样，此用户就可以在数据库中做权限
创作背景最近本人在 PyCharm 的虚拟环境安装第三方库的时候报了错，说 no such option: --bulid-dir ，如下图- 完整的示例代码如下： 代码如下:<％@LANGUAGE="JAVASCRIPT" CODEPAGE="6
- 这篇文章主要介绍了python requests抓取one推送文字和图片代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一
- 前提环境准备python3+pillow+pyautogui先提前安装好python3以及pillow和pyautogui模块这里介绍一下模
- reflect反射首先，我们要区分两个概念——“标识名”和&
- antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组,
- 本文实例讲述了Laravel框架文件上传功能实现方法。分享给大家供大家参考，具体如下：以Laravel 5.2.45 框架为主，进行文件上传
- 本文实例讲述了python socket多线程通讯方法。分享给大家供大家参考，具体如下：#!/usr/bin/evn python"
- 1、元旦之前受赵晨之邀作为讨论嘉宾参加了ACM组织的“人与信息社会巡讲”。2、去之前赵晨发给了我大致的讨论提纲。咣当了好几下~说实话，我是硬
- 按照某一列排序d = {'A': [3, 6, 6, 7, 9], 'B': [2, 5, 8, 0, 0]
- 本文为大家分享了Python遗传算法解决最大流问题，供大家参考，具体内容如下Generate_matrixdef Generate_matr
- 最近在用python处理Excel表格是遇到了一些问题1, xlwt最多只能写入65536行数据, 所以在处理大批量数据的时候没法使用2,
- 本篇文章主要介绍了Python基于mysql实现学生管理系统，分享给大家，具体如下：import pymysqlimport redef i
- 引言go-doudou从v2版本开始已经支持开发gRPC服务。开发流程跟v1版本是一致的，都是先在svc.go文件里的interface里定
- with语句会设置一个临时的上下文，交给上下文管理器对象控制，并且负责清理上下问题。这样做能避免错误并减少样板代码，因此API能更安全，更易
- 如果需要一个简单的Web Server，而不是安装那些复杂的HTTP服务程序，比如：Apache，Nginx等。那么可以使用Python自带
- 都知道django每次请求都会连接数据库和释放数据库连接。Django为每个请求使用新的数据库连接。一开始这个方法行得通。然而随着服务器上的
- 最近想把word密码文件的服务器密码信息归档到mysql数据库，心想着如果直接在里面写明文密码会不会不安全，如果用sha这些不可逆的算法又没
- GBK简体字符集的编码是同时用1个字节和2个字节来表示的。当高位是0x00～0x7f时，为一个字节，高位为0x80以上时用2个字节表示&qu
