javascript操作table增加，批量删除，模糊查询，文本框修改（兼容IE，FF)

最新推荐文章于 2023-01-17 10:18:39 发布
最新推荐文章于 2023-01-17 10:18:39 发布
阅读量404 收藏 1
点赞数
分类专栏： DIV+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vera514514/article/details/8467307
版权

先看代码：
 
<!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>
     <title></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.οnclick=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);//清除删除列表       
     </script>
 
                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.οnclick=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";
                       }
                  }
               }
         }
 
</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>

夏小安Lily
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现动态增加删除表格行(兼容IE/FF)
10-30
javascript实现动态增加删除表格行(兼容IE/FF)
JS随机模糊掉字符串中的内容
那片枫叶~
04-27 156
/** *随机模糊掉字符串中的内容 *string 要模糊掉的字符串 *@num 保留几个正常字符，默认1个 */ funtion replaceStr(num=1){ let strArr = string.split(''),arrNum= strArr.length,newArr= new Array(arrNum).fill('x') for(let i=0;i < numm;i++){ j = Math.floor(Math.random()*arrNum); ne
el-table 批量删除功能
qq_41438838的博客
08-17 1240
el-table 批量删除功能
html table 批量删除,Bootstrap Table 删除和批量删除
weixin_29635155的博客
06-29 601
一条记录可以看做一条数据的数组1 Html1.1 批量选择框1.2 单个删除2 bootStarp2.1 批量获得获得选择的数据删除function deleteUserList() {//获取所有被选中的记录var rows = $("#user").bootstrapTable('getSelections');if (rows.length== 0) {alert("请先选择要删除的记录!"...
表格批量删除
m0_46484437的博客
01-17 207
批量删除选中的内容
【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行
Sabrina_cc的博客
06-06 5459
ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。本文主要展示批量删除功能，以及多选行有不可选 2.添加selection-change ids用来保存select选中的行id；并使用single和mutiple记录选中情况。 二、实现批量删除功能 只有是multiple时，表示开启多选模式，才可以使用批量删除按钮 2.删除函数撰写 批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能。 三、含有
JavaScript写的table增、批量删、模糊查询、文本框编辑
11-08
JavaScript写的table增、批量删、模糊查询、文本框编辑
js文本框输入点回车触发确定兼容IE、FF等
01-19
代码如下: <head> [removed] function EnterPress(e){ //传入 event var e = e || window.event; if(e.keyCode == 13){ document.getElementById(“txtB”).focus(); } } [removed] </head>...
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
12-12
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) body {font-size:12px;} .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px...
Bootstrap Table批量（全选）删除
祈澈菇凉
03-13 7407
Bootstrap Table批量（全选）删除，类似以下这样： 思路 1:jsp页面，删除按钮 <div class="mytab"> <table id="mytab" class="table table-hover"></table> </div> 2：在columns里面，check...
HTML TABLE批量添加行与删除行
03-06
HTML TABLE批量添加行与删除行.javascript实现。
jtable的批量删除
u013497977的专栏
03-12 1286
else if (e.getSource() == del) { //不能这样写 // int[] row = table.getSelectedRows();//获取选中的行号 // for(int a:row) tableModel.removeRow(a); /* * 这段代码有点技术含量，因为每删除一行，后面行的序号都会减一，总行数也会变化，所以要实时获取行
纯前端多选表格table批量删除
weixin_44769310的博客
03-05 1787
在工作中对表格的数据进行删除，一般来说都是与后端进行联调。但是也会遇到这种情况，对表格删除操作的时候不需要与后台对接，在对表格数据进行删除后点击保存的时候才与后台对接。 今天写这个功能的时候首先想的是两个for循环，这样写起来会代码会比较多且很复杂。抱着对简短优美代码的追求。 handleDeleteSelection() { this.multipleSelection.forEac...
javascript实现增删改
zhiming1164的专栏
03-20 839
Code: >   html>       head>           title>addUser.htmltitle>              meta http-equiv="keywords" content="keyword1,keyword2,keyword3">           meta h
table总结insertRow、deleteRow
beautifulsarah的博客
01-22 1767
 表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列：for (var i=0; i<trCnt; i++)                     table.rows[i].cells.length; javascript操作table:     insertRow()，delete
js表格记录增删改查
热门推荐
berry sky
12-30 1万+
表格记录增删改查            tr{          text-align:center;        }                    //通过新增按钮来控制表格的显示与隐藏        var optionFlag = "save";        var updateRowIndex = -1;        var checkFlag=f
Vue elementUi表格批量删除
qq_32280665的博客
11-05 5222
效果如图:根据官网多选表格所给的@selection-change="handleSelectionChange",此方法可以获取包含当前选中所有数据的数组，但是并没有下标index.第一种方法:通过两数组中对象的属性值是否相同进行删除，但是存在多个相同对象的数据时，会一起删除，不采用。第二种方法:直接通过数组中的数据对象，==号比较，这里注意了"虽然多个对象相同，但并不是同一个引用，可以实现一一...
jQuery 操作列表批量删除数据
rainbow_m的博客
02-03 8422
方式一： //判断全选复选框是否选中(全选和取消全选)       $( "#allcbx").bind("click" ,function(){              var ck=$("input[name=allcbx]" ).attr("checked");              if(ck == "checked" ){
javascript实现对html表格的增删改
qq_930814389的博客
05-13 488
javascript实现对html表格的增删改 代码如下： http-equiv="Content-Type" content="text/html; charset=utf-8" /> 无标题文档 type="text/css"> #box{height:350px;width:1000px;position:absolute;background:#FFF;bottom:0
javascript table 批量修改
最新发布
10-19
```javascript // 获取表格元素 const table = document.getElementById('myTable'); // 获取需要修改的单元格 const cells = table.getElementsByTagName('td'); // 给单元格添加事件监听器 for (let i = 0; i ; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值