suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung von Beispielen für das Hinzufügen, Löschen und Ändern von Tabellen mithilfe von Javascript_Javascript-Kenntnissen

Detaillierte Erläuterung von Beispielen für das Hinzufügen, Löschen und Ändern von Tabellen mithilfe von Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:58:481356Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Hinzufügen, Löschen und Ändern von Tabellen mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: 

<!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&#63;$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&#63;_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&#63;$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&#63;$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&#63;$childNode_.getAttribute("value"):$childNode_.value;
    if($nodedata_!=_oTempValue_["$"+_cellindex_])//与原值比较
    {
    _cancelornot_=confirm("你之前的内容作了修改，保存修改吗？");
    break;
    }
   }
   if(_cancelornot_)
   {
    //避免前次提交为空
    var _firstNode_=_oPreTempRow_.cells[0].firstChild;
    var $firstnodedata_=document.all&#63;_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&#63;_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&#63;"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&#63;"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&#63;"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&#63;"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&#63;"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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Formularvalidierungs-Plug-in, das die von mir selbst geschriebene Ajax-Validierung unterstützt_Javascript-KenntnisseNächster Artikel：JS-Formularvalidierungs-Plug-in, das die von mir selbst geschriebene Ajax-Validierung unterstützt_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen