ダイナミックテーブルの実現

2810 ワード
JavaScript html
<!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>
js selectの例