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

蔡袅 2011-08-09 01:43:07
加精
刚毕业的的菜鸟，来公司做C# Winform通讯，一直感觉javascript很有意思，想写个操作table的网上好像没找到完整的例子。。。所以吃吃大学老本。。完全按自己的思路写的，也没参考网上。。当然会很烂甚至有些代码很可笑（不过俺不怕哈，就是要进步嘛。。）。。求各位指导，提出改进办法，优化语句，兼容性，内存leak。。。

<!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); //清空选择列表

            };
...全文
4488 161 打赏 收藏 转发到动态 举报
写回复
用AI写文章
161 条回复
切换为时间正序
请发表友善的回复…
发表回复
王莹月 2012-06-08
  • 打赏
  • 举报
 回复
Jquery乃何物啊，Jquery咋做啊？
hebsxl2000 2011-08-16
  • 打赏
  • 举报
 回复
不行必须发出点感慨，我去。。。。。。。。。。。。。。。。。。。。。。。。。。
ldwd 2011-08-15
  • 打赏
  • 举报
 回复
刚毕业就能写出这么漂亮的代码，佩服佩服
sdbtongtong 2011-08-15
  • 打赏
  • 举报
 回复
看到一大串代码没有看下去的欲望啊，看来本人求知欲不够强
ZeoJon 2011-08-15
  • 打赏
  • 举报
 回复
看着真舒服~
KEL-1 2011-08-15
  • 打赏
  • 举报
 回复
guanzhuyixia .....
fendoudxiaohouzi 2011-08-15
  • 打赏
  • 举报
 回复
老马888 2011-08-15
  • 打赏
  • 举报
 回复
[Quote=引用 55 楼 zhaoqiliang527 的回复:]
楼主爱钻研，顶一个！
[/Quote]顶
大Y 2011-08-15
  • 打赏
  • 举报
 回复

总结的太好了
Silly728 2011-08-15
  • 打赏
  • 举报
 回复
[Quote=引用 40 楼 ksdy138141314 的回复:]

我在是想说，好长的代码
[/Quote]

+1,
bingjiangxihuang 2011-08-14
  • 打赏
  • 举报
 回复
给力，好长呀，我没那个耐力
SKY20110501 2011-08-14
  • 打赏
  • 举报
 回复
楼主牛人
八面山人 2011-08-14
  • 打赏
  • 举报
 回复
第一次看见有这么给变量取名的，不知道是你的想象力太丰富还是没受过专业训练
长笛党希望 2011-08-14
  • 打赏
  • 举报
 回复
很强大~
flowerjack 2011-08-14
  • 打赏
  • 举报
 回复
大师发言，不同凡响。
刚用JS，不太懂它怎样子面向对象
[Quote=引用 113 楼 bao110908 的回复:]

完全的面向过程代码，没有丝毫面向对象的思想，全部的代码都揉在了 window.onload 函数中！

如果要求不改尚可，要求一旦更改，估计这 3 层楼的代码得全部重写。
[/Quote]
flowerjack 2011-08-14
  • 打赏
  • 举报
 回复
兄弟，你好。我也是做Java的，但不太懂你意思。
楼主做的这个和什么语言一点关系都没有吧
[Quote=引用 82 楼 youjianbo_han_87 的回复:]

asp.net就是这么“恶心”(纯属个人观点，非骂人)，java程序员飘过...............
[/Quote]
qingyun5198 2011-08-14
  • 打赏
  • 举报
 回复
学习学习...顶一下！
liupingtoday 2011-08-14
  • 打赏
  • 举报
 回复
顶一个，值得一学！
kangyangyangshuer 2011-08-14
  • 打赏
  • 举报
 回复
一般，回帖得十分！
darlling 2011-08-14
  • 打赏
  • 举报
 回复
路过。。。
加载更多回复（136）
JavaScript写的table增、批量删、模糊查询、文本框编辑
JavaScript写的table增、批量删、模糊查询、文本框编辑
javascript操作table增加，批量删除，模糊查询，文本框修改（兼容IE，FF)
先看代码：   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml">                       var _OTable_ = null;          var _oTbody_ = null;          var _arr
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
jQuery + JavaScript 实现的动态添加文本框功能（一）
jQuery + JavaScript 实现的动态添加文本框功能 1.0版本 ，这个功能在一次上传多个文件时，经常会用到，这篇文章主要实现动态添加文件上传控件的功能。 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName(
jQuery模糊查询的两种方法
方法一：jQuery根据文本框输入实时模糊查询 HTML代码： 学号 姓名 性别 年龄 2014213840 张三 男 20 2014213841 李四 男 20 2014213842 王三 女 30
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章