动态表格操作-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>动态表格</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">

function addOneRow(){
  //判断是否传入足够参数
 if(arguments.length <= 1 ){
  return "error";
 }
 try{
  //获取table句柄
  var tb=document.getElementById(arguments[0]);
  //添加一行
  var newTr = tb.insertRow();
  for(var i=1 ;i < arguments.length;i++){  
   //添加一列
   var newTd = newTr.insertCell();
   newTd.innerHTML = arguments[i]; 
  }
 }catch (e) {
  return e.toString();
 }
 return "true";
}

function deleteOneRow(){
  //判断是否传入足够参数
 if(arguments.length == 0){
  return "error";
 }
 var thisTag = arguments[0];
 try{
  //获取句柄
  var obj = getThisObj(thisTag); 
  //寻找最靠近的table
  while (obj.nodeName.toUpperCase() != 'TABLE'){  
   obj =obj.parentElement;  
  } 
  //删除一行
  var newTr = obj.deleteRow(getTrRowOfTable(thisTag)); 
 }catch (e) {
  return e.toString();
 }
 return "true";
}

function getTableMaxRow(){
 //判断是否传入足够参数
 if(arguments.length == 0 ){
  return "error";
 }
 try{
  //获取句柄
  var obj = getThisObj(arguments[0]); 
  //寻找最靠近的table
  while (obj.nodeName.toUpperCase() != 'TABLE'){  
   obj =obj.parentElement;  
  }
  return obj.rows.length;
 }catch (e) {
  return e.toString();
 }
}

function getTrRowOfTable(){
 //判断是否传入足够参数
 if(arguments.length == 0 ){
  return "error";
 }
 try{
  //获取传入标签的句柄
  var obj = getThisObj(arguments[0]); 
  //寻找最靠近的TR
  while (obj.nodeName.toUpperCase() != 'TR'){  
   obj =obj.parentElement;  
  }
  //返回TR的行号 
  return obj.rowIndex;
 }catch (e) {
  //返回异常信息
  return e.toString();
 }
}

//获取指定标签的句柄
function getThisObj(){
 var obj;
 //若定义了id
 if(arguments[0].id != ""){
  obj=document.getElementById(arguments[0].id);
  return obj;
 } 
 //若定义了name
 if(arguments[0].name != ""){
  //通过name取句柄得到的是个数组，所以必须保证该name页面唯一
  obj=document.getElementsByName(arguments[0].name)[0];  
  return obj;
 }
}

function showInfo(){
 //显示本行号
 alert("当前行号为："+ getTrRowOfTable(arguments[0]));
 //显示总行数
 alert("总行数为："+ getTableMaxRow(arguments[0]));
}


var rowId=1;
function addRow(){
 var tagStr="<input type=text value=ccc name="+rowId+" onclick='addRow();showInfo(this)' onchange='deleteOneRow(this);'>";
 addOneRow("tb",tagStr);
 rowId++;
}
</script>
</HEAD>
<BODY onload="addRow();">
 <table id="tb"></table>
</BODY>
</HTML>
动态表格的实现
