javascript 写的table增、批量删、模糊查询、文本框编辑，求指导。

Question

本帖最后由 xx_mm 于 2011-08-09 13:45:14 编辑

Answer 1

[code=HTML]            //更新
            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;                  

Answer 2

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 操作table 增加，批量删除，模糊查询，文本框修改（兼容IE，FF）。】

Answer 3

辛苦了 LZ jQuery整起来可能代码看起来更爽。多谢分享。

Answer 4

真腻害，学习学习～哪天用jquery试试～

Answer 5

很牛，不用jquery，我都忘了以前的js是怎么写的。
欢迎光临我的博客

Answer 6

純粹的JS還是比較麻煩，可以參考jQuery，應該來得快些。

Answer 7

我做了个跟你相同的不过我T-SQL自己写的。

Answer 8

其实主要是js练练手，jq不错的...
我感觉代码还可以压缩优化，真心想听各位的指导，某些地方相信可以改进的，大家互相学习

Answer 9

 <textarea rows="10" cols="83"></textarea> 要在div中屏蔽掉html标签？？？？？？

Answer 10

               <textarea rows="10" cols="83"></textarea> 要在div中屏蔽掉html标签                                                                           
                                       厚爱

Answer 11

asp.net就是这么“恶心”(纯属个人观点，非骂人)，java程序员飘过...............

Answer 12

可以试试用jQuery来写，也许代码会简单些。
不错，，，顶了！！！

Answer 13

<marquee>我在这儿</marquee>

Answer 14

lz 真牛x 刚毕业就能做的这么好 不一般啊

Answer 15

一堆 fei ma， 这些东西不值钱。

Answer 16

楼主抽空学习下dojo或者jquery库，这样界面会更漂亮，代码也会简洁点。。

Answer 17

大家都说用jquery，那么LZ就用jquery重写一遍吧