JavaScript
搜索
分类

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

作者：永远爱好写程序 时间：2024-04-29 13:24:36　

本文实例讲述了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程序设计有所帮助。

标签：javascript,表格
0
投稿

猜你喜欢

  • Python创建一个空的dataframe,并循环赋值的方法

    2022-03-09 22:25:41

  • 编码问题引起的折腾

    2009-07-03 12:43:00

  • 利用python 读写csv文件

    2023-02-03 14:08:07

  • python两个_多个字典合并相加的实例代码

    2023-05-05 07:50:33

  • vue服务端渲染添加缓存的方法

    2024-04-30 10:37:30

  • 用css实现透视效果

    2009-09-05 16:33:00

  • fso怎样判断一个盘上是否有文件

    2007-09-26 12:35:00

  • 快速解决 MySQL中与浮点比较有关的问题

    2008-11-27 16:28:00

  • python 遗传算法求函数极值的实现代码

    2023-08-29 11:36:11

  • 一步一步教你网站同步镜像(转载)

    2024-01-21 03:38:11

  • Python爬虫工具requests-html使用解析

    2021-10-23 02:20:27

  • Vue组件间的通信方式详析

    2024-05-09 15:12:29

  • js数组去重的方法汇总

    2024-04-18 10:55:17

  • 微信小程序实现上传图片功能

    2024-05-02 17:29:03

  • 如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱

    2022-07-03 20:51:47

  • jQuery打造动态渐变按钮

    2010-05-10 20:21:00

  • Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程

    2021-03-14 09:16:22

  • 解说mysql之binlog日志以及利用binlog日志恢复数据的方法

    2024-01-28 08:39:57

  • javascript中parseInt()函数的定义和用法分析

    2024-04-22 22:44:16

  • MySQL两种表存储结构性能比较测试过程

    2007-12-09 12:45:00
    • asp之家 网络编程 m.aspxhome.com