javascript实现表格增删改操作实例详解_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_= 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_



 
操作Table之增删查改
 

 
添加
 
 姓名：
 
 
 
 性别：
 
 
 
 年龄：
 
 
 
 籍贯：
 
 
 
 
 

 
查找
 
 查找内容：