教程搜索：

一网情深 >> 精选代码 >> 表格特效代码 >> 用javascript在ie中实现表格的添加行删除行 > 正文

用javascript在ie中实现表格的添加行删除行

[来源：一网情深] [作者：tyx8023整理] [日期：2008-01-22] [热度：]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1"  enctype="multipart/form-data" method="post" action="testFileUpload.jsp">
  <table width="732" border="1" id="uploadFileTableID">
    <tr>
      <td width="70"> </td>
      <td width="368"> </td>
      <td width="185"> </td>
      <td width="81"> </td>
    </tr>
  </table>
 <p>
    <label>
    <input type="button" name="Submit" value="添加"   onClick="return  addFileSimple('form1','uploadFileTableID');" />
    </label>
    <input type="submit" name="Submit2" value="提交"    />
  </p>
</form>
</body>
</html>

<script language="javascript">
/*添加文件到列表中去    
并且在form里面中添加相应的<input type="file" .... 
必须有一个Div(必须在要Submit的Form里面)，
然后定位到该Div,然后产生动态的input框
 */   
 /**                         
 @参数：filePathLocationID(能从中获取文件路径的Input框ID) 
 @参数：fileRenameLocationID(能从中获取更名后的Input框ID)
 @参数：宣示的列表TableID：====>fileTableList
 @参数：formID       (要Submit的Form)
 文件框的命名格式：uploadFileInput+i      
 
 @结果：在规定的Form里面，添加如下：
 1.Hidden相应的InputFile框，以便提交多文件（5个文件，对应5个inputFile框) 保存filePath   
 (在服务器端取出,要有不同的ID)
 2.Hidden的Input框保存projID
 3.Hidden 的Input框保存fileName              
 4.Hidden的Input框===〉fileOwner
 5.Hidden的Input框===〉fileType                
 6.*****fileDate不上传 （在入库时添加)
 */
/*function addFile(filePathLocationID,fileRenameLocationID,formID,tableID)        
{             
   var opetaionICONHTML= "<td align=\"center\" ><img src=\"../listpic/del.gif\" alt=\"删除\"></td>"  ; 
   var uploadFileForm=document.getElementById(formID);
   var uploadFileTable=document.getElementById(tableID);   
   var filePathLocation=document.getElementById(filePathLocationID );             
   var fileRenameLocation=document.getElementById(fileRenameLocationID);
   
   var rows=uploadFileTable.rows;
   var currentRow=0;
   if(rows!==null)       
    {
    currentRow=rows.length;   
    }
	
   alert("begin to isnert hidden input file");
  // alert("form innerHTML==="+uploadFileForm.innerHTML);
   var hiddenFileInputHMTL= "";
   hiddenFileInputHMTL+="<div style=\"display:\" id=\"fileInputDiv"+curretnRow+"\">";       
   hiddenFileInputHMTL+="<input name=\"filePathInput"+curretnRow+"\" type=\"file\" id=\"filePathInput"+curretnRow+"\"/>";
   hiddenFileInputHMTL+="</div>";     
   alert("after form innerHTML ==="+hiddenFileInputHMTL);
   uploadFileForm.innerHTML=hiddenFileInputHMTL;
	
	
   alert("begin to isnert rows");
   var newRow=uploadFileTable.insertRow();   
   //编号
   var rowNumCell=newRow.insertCell(0);       
   rowNumCell.innerHTML=currentRow;       
   //文件名称 (改名后)
   //文件名称 (改名后)
   var fileNameCell=newRow.insertCell(1);       
   fileNameCell.innerHTML=fileRenameLocation.value+"("+filePathLocation.value+")";   
   //操作  
   var operationCell=newRow.insertCell(2);
   operationCell.innerHTML= opetaionICONHTML;

//添加一个一个隐藏的Input框

return false;
}       */  
  function addFileSimple(formID,tableID)    
{
   var uploadFileForm=document.getElementById(formID);
   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="";
   //添加一个隐藏的Input框   
   fileUploadInputHTML+="文件路径：<div style='display:' id='fileInputDiv"+currentRow+"'>";
   fileUploadInputHTML+="<input name='filePathInput"+currentRow+"' type='file' id='filePathInput"+currentRow+"\"'/>";
   fileUploadInputHTML+="</div>";   
   filePathCell.innerHTML=fileUploadInputHTML;   
   //改名
   var fileNameCell=newRow.insertCell(2);   
   var renameInputHTML="";
   renameInputHTML+="重命名为：<input type='text' name='fileReName"+currentRow+"' id='renameFileInput"+currentRow+"' />";
   fileNameCell.innerHTML=renameInputHTML;       
   //操作  
   var operationCell=newRow.insertCell(3);  
   //alert("tableID==="+tableID);
   var opetaionICONHTML= "<td align='center'><img src='../listpic/del.gif'  onClick='return delUploadFileIcon(\""+tableID+"\","+currentRow+");' alt='删除'></td>"; 
   operationCell.innerHTML= opetaionICONHTML;
   indexUploadFile(tableID);     
   return false;
} 
     
function delUploadFileIcon(tableID,rowNO)
{       
  //alert("value=="+ document.getElementById("filePathInput1").value);
   if(confirm("您将删除该文件，是否继续?"))
   {
   var uploadFileTable=document.getElementById(tableID); 
 //  //alert("tableID==="+tableID+"\t  rowNO=="+rowNO);      
   uploadFileTable.deleteRow(rowNO);   
   }
   indexUploadFile(tableID);
   return false;
}   
function indexUploadFile(tableID)
{
  // alert("hlee");
  var uploadFileTable=document.getElementById(tableID); 
   var rows=uploadFileTable.rows;
   if(rows!==null)
   {  
	   for(var i=1;i<rows.length;i++)
	   {
	     rows[i].cells[0].innerHTML=i;
	   } 
   } 
}
 
 
 
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Tags:javascript ie 表格添加删除