首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 15, 2015

本文实例讲述了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实现表格增删改操作实例详解

- Author -

永远爱好写程序

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Excel(4) 正则表达式(3) 驱动模型(1) 乱码(3) 自动播放(1) 抽象类(1) 静态压缩(1) 接口(1) 信息校验(1) 分区(2)
You might like
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JavaScript 继承详解（六）
2016/10/11 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
实例讲解python函数式编程
2014/06/09 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python实现Dijkstra算法
2018/10/17 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
Footshop乌克兰：运动鞋的最大选择
2019/12/01 全球购物
秋季运动会广播稿
2014/02/22 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
预备党员入党感想
2015/08/10 职场文书
企业法人任命书
2015/09/21 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电