动态表格例子1

zheyiw

浏览: 999844 次
性别:
来自: 广州

最近访客更多访客>>

jklwan

devcang

weblxw

daikainan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<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 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 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 colspan="10" class="td_table_bottom"> 
     <input type="button" class="unnamed_anliu" name="cmd" value="添 加" 
      onclick="return  addFileSimple('uploadFileTableID','inputData');" /> 
     <input type="button" class="unnamed_anliu" name="cmd" value="删 除" 
      onclick="delFileSimple('uploadFileTableID')" /> 
    </td> 
   </tr> 
   <tr> 
    <td height="22" align="center" class="td_list_2" nowrap> 
     数据项 
    </td> 
    <td> 
     <input type="text" name="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 delFileSimple(tableID) 
{ 
var objTable=document.getElementById(tableID); 
var rows=objTable.rows; 
var length=rows.length; 
var i=1; 
if(rows!==null)    {   
  for(i=1;i<length;i++) 
  { 
   //alert(rows.cells[0].childNodes[0].checked);   
   if (rows.cells[0].childNodes[0].checked) 
   { 
    objTable.deleteRow(i); 
    i=i-1; length=length-1;  //rows[]会根据页面上显示的行自动更新 
   } 
  } 
} 
} 
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); 
   var InputHTML=""; 
   InputHTML+="<input type='checkBox' name='check' />"       
   rowNumCell.innerHTML=InputHTML;       
   //文本框 
   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 align='center'><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 align='center'><input  type='button' value='删除' onClick='return delUploadFileIcon(\""+tableID+"\","+i+");' ></td>"; 
  operationCell.innerHTML= opetaionICONHTML; 
  } 
} 
} 
</script>

分享到：