动态表格例子2

<html> 
<head> 
  <title>数据项</title> 
  <link rel="stylesheet" type="text/css" 
   href="/pages/style/default/css/tab-tidy.css" /> 
</head> 
<body> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" 
   class="table_all"> 
   <tr> 
    <td width="10%" class="td_list_1" nowrap> 
     &nbsp; 
    </td> 
    <td class="td_list_1" nowrap> 
     数 据 项 
    </td> 
   </tr> 
  </table> 
  <table id="uploadFileTableID" width="100%" border="0" cellpadding="0" 
   cellspacing="0" class="table_all"> 
   <tr> 
    <td height="22" width="10%" align="center" class="td_list_2" nowrap> 
     <!--<input type="checkbox" class="input_checkbox" name=zheID value=zheID />--> 
    </td> 
    <td width="20%" nowrap class="td_list_2" nowrap> 
     <!-- <input type="text" value="s" />--> 
    </td> 
    <td nowrap class="td_list_2" nowrap> 
     <!-- <input type="text" value="s" />--> 
    </td> 
   </tr> 
  </table> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" 
   class="table_all"> 
   <tr> 
    <td class="td_list_2" colspan="10"> 
     &nbsp; 
    </td> 
   </tr> 
   <tr> 
    <td height="22" width="10%" class="td_list_2" nowrap> 
     数 据 项 : 
    </td> 
    <td width="20%"> 
     <input type="text" name="inputData" /> 
    </td> 
    <td class="td_table_bottom"> 
     <input type="button" class="unnamed_anliu" name="cmd" value=" 添 加 " 
      onclick="return  addFileSimple('uploadFileTableID','inputData');" /> 
    </td> 
   </tr> 
   <tr> 
    <td colspan="10"> 
     <input type="button" class="unnamed_anliu" value="关 闭" 
      onclick="toSave()" /> 
    </td> 
   </tr> 
  </table> 
</body> 
</html> 
<script language="javascript">   
//author: zheyiw 
//date: 23/7/20009 
function toSave(){ 
window.close(); 
} 
function addFileSimple(tableID,inputData)     
{ 
var a=document.getElementById(inputData); 
if (a.value=="") { 
  alert("请在下面的数据项中输入数据"); 
  return false; 
} 
else { 
  var addData=a.value; 
  a.value=""; 
} 
   var uploadFileTable=document.getElementById(tableID);   
   var rows=uploadFileTable.rows; 
   var currentRow=0; 
   if(rows!==null) {currentRow=rows.length; }           
   //alert("begin to isnert rows"); 
   var newRow=uploadFileTable.insertRow();   
   //编号 
   var rowNumCell=newRow.insertCell(0);       
   rowNumCell.innerHTML=currentRow;       
   //文本框 
   var filePathCell=newRow.insertCell(1);   
   var fileUploadInputHTML=""; 
   fileUploadInputHTML+="<input type='text' name='addData' value="+addData+" />" 
   filePathCell.innerHTML=fileUploadInputHTML; 
//添加删除按钮   
var operationCell=newRow.insertCell(2);   
var opetaionICONHTML= "<td class='td_table_bottom'><input  type='button' value='删 除' onClick='return delUploadFileIcon(\""+tableID+"\","+currentRow+");' ></td>"; 
operationCell.innerHTML= opetaionICONHTML;   
   
   indexUploadFile(tableID);     
   return false; 
} 
     
function delUploadFileIcon(tableID,rowNO) 
{ 
   var uploadFileTable=document.getElementById(tableID);     
   uploadFileTable.deleteRow(rowNO);   
   indexUploadFile(tableID); 
   return false; 
}   
function indexUploadFile(tableID) 
{   
var uploadFileTable=document.getElementById(tableID); 
var rows=uploadFileTable.rows; 
var operationCell 
var currentRow=0; 
if(rows!==null) {currentRow=rows.length; }           
if(rows!==null)    {   
  for(var i=1;i<rows.length;i++) 
  { 
   rows.cells[0].innerHTML=i; 
   //更新删除按钮 
   //最笨的方法,先删除后添加 
   rows.deleteCell(2); 
       
  var operationCell=rows.insertCell(2);   
  var opetaionICONHTML= "<td class='td_table_bottom'><input  type='button' value='删  除' onClick='return delUploadFileIcon(\""+tableID+"\","+i+");' ></td>"; 
  operationCell.innerHTML= opetaionICONHTML; 
  } 
} 
} 
</script> 

你可能感兴趣的:(动态表)