JavaScript实现动态增加文件域表单

  js代码:

  

复制代码 代码如下:

  <script language="javascript">

  //全局变量,代表文件域的个数,并用该变量区分文件域的name属性

  var file_count = 0;

  //增加文件 域

  function additem(id) {

  if (file_count > 9) {

  alert("最u22810 10个u25991 件u22495 ");

  return;

  }

  //定义行变量row;单元格变量cell;单元格内容变量str。

  var row,cell,str;

  //在指定id的table中插入一行

  row = eval("document.all["+'"'+id+'"'+"]").insertRow();

  if(row != null ) {

  //设置行的背景颜色

  row.bgColor="white";

  //在行中插入单元格

  cell = row.insertCell();

  //设置str的值,包括一个文件域和一个删除按钮

  str='<input onselectstart="return false" class="tf" onpaste="return false" type="file" name="file[' + file_count + ']" style="width:500px" onkeydown="return false;"/>';

  str += " <input type="+'"'+"button"+'"'+" value="+'"'+"删除"+'"'+" onclick='deleteitem(this,"+'"'+"tb"+'"'+");'>";

  //文件域个数增加

  file_count++;

  //设置单元格的innerHTML为str的内容

  cell.innerHTML=str;

  }

  }

  //删除文件域

  function deleteitem(obj,id) {

  var rowNum,curRow;

  curRow = obj.parentNode.parentNode;

  rowNum = eval("document.all."+id).rows.length - 1;

  eval("document.all["+'"'+id+'"'+"]").deleteRow(curRow.rowIndex);

  file_count--;

  }

  </script>

  html代码:

  

复制代码 代码如下:

  <input type=button value="增加" onclick='additem("tb")'/><br/>

  <table cellspacing="0" id="tb" style="width:400px">

  </table>