DOM大作业之Table表单的增删改查！

最新推荐文章于 2022-09-22 16:14:22 发布
最新推荐文章于 2022-09-22 16:14:22 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： JavaScript 文章标签： table 作业 input function textbox delete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fox123871/article/details/6678679
版权
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="QCPlatform.SysTools.WebForm3" %>

<!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 runat="server">
    <title>无标题页</title>
    <script language="javascript" 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;


                  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>

fox123871
关注
专栏目录
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
C#表单的增删改查
06-03
对于与数据库连接后，对数据库中的类容以表单形式显示出来，及对内容的增删改
DOM增删改查
weixin_44381544的博客
04-16 225
操作HTML 增加 1.先创建 2.再增加内容 3.再放到指定位置 节点操作 都是插入的孩子 createElement 创建元素节点 eg: var p=document.createElement(‘p’) appendChild 追加节点 追加永远在末尾 createTextNode 创建文本节点 write insertBefore ...
表单的增删改查
weixin_47467175的博客
09-26 168
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=...
使用函数和DOM实现表格的增删查
weixin_44200575的博客
08-24 293
使用函数和DOM实现表格的增删改查使用函数和DOM实现表格的增删改查新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出...
jQuery对table表格进行增删改查
10-20
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
最新发布
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
10-22
BootstrapTable与KnockoutJS的结合使用是为了构建具备增删改查功能的动态Web表格。要理解这一主题，我们首先需要分别了解BootstrapTable和KnockoutJS的基本知识以及它们各自的功能。 Bootstrap是一个前端框架，它...
表单的增删改查（代码）
m0_64707449的博客
09-22 596
表单的增删改查
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
表单数据的增删查改
weixin_43990252的博客
01-07 974
对表单的增删查改是前端必备的一种技能 接下来我放上自己写的表单 这是HTML部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt;
表单 增删改查+敏感字
zh_binfgan的博客
10-25 544
订单管理 * { font-size: 14px; margin: 0; padding: 0; } body { padding: 16px 32px; } .filter {
使用DOM方法实现表格的增删改查
Cheris_LT的博客
05-18 967
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .tab { margin-top: 150px; border-collapse: collapse; } .tab tr:first-child { background-colo
html dom增删表格,HTML DOM增删改查
weixin_32192681的博客
06-20 284
Title#electli{width:100px;height:20px;background:#c4e3f3;float:left;list-style:none;text-align:center;margin-left:10px;font-size:7px;line-height:20px;}#listli{width:100px;height:20px;background:#78c6e...
DOM的增删改查
兔老大的胡萝卜
09-03 167
border-collapse: collapse 这个样式可以把表格的内部边框消除，变成一条细线 表格可以通过循环在script中直接表示： document.write(“”) document.write(““); for (var i = 1 ; i &amp;lt;=1 ; i++){ document.write...
HTML DOM节点的增删改查
士不可以不弘毅，任重而道远
06-29 1322
上篇博客中，我们已经初步接触了DOM基础，但是我们学习是为了能够更好地应用，今天我们就来看看DOM节点的增删改查。     不管在哪里，我们想要操作一个东西，总是应该先去获得它。那么我们怎么获得呢？     HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点是属于元素节点)。     W3C 提供了比较方便简单的定位节点的方法和属性，以便
dom增删改查
cdut2016的博客
06-18 284
Dom文档对象模型 把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。 这里我就直接创建一个实例就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#">aa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值