脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现动态增加文件域表单

js实现动态增加文件域表单功能

 更新时间：2018年10月22日 09:34:13   作者：dq_095  
这篇文章主要为大家详细介绍了js实现动态增加文件域表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现动态增加文件域表单的具体代码，供大家参考，具体内容如下

实现代码：

<html>
<head>
 <title>动态添加表单元素</title>
</head>

<script language="javascript"> 
 //全局变量，代表文件域的个数，并用该变量区分文件域的name属性 
 var file_count = 0;
 //增加文件 域 
 function additem(id) {
  if (file_count > 9) {
   alert("最多10个 ");
   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>

<body>
 <input type=button value="增加" onclick='additem("tb")' /><br/>
 <table cellspacing="0" id="tb" style="width:400px">
 </table>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 序列化模块json代码实例详解

    序列化模块json代码实例详解

    这篇文章主要介绍了序列化模块json代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • JS 实现微信扫一扫功能

    JS 实现微信扫一扫功能

    这篇文章主要介绍了JS 实现微信扫一扫功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-09-09
  • JS版微信6.0分享接口用法分析

    JS版微信6.0分享接口用法分析

    这篇文章主要介绍了JS版微信6.0分享接口用法,结合实例形式分析了JS版微信6.0分享功能原理、接口调用方法与相关使用注意事项,需要的朋友可以参考下
    2016-10-10
  • 手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果

    手把手教你做超酷的条形码效果...
    2007-04-04
  • JavaScript利用HTML DOM进行文档操作的方法

    JavaScript利用HTML DOM进行文档操作的方法

    DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。通过本文给大家介绍JavaScript利用HTML DOM进行文档操作的方法，需要的朋友参考下吧
    2016-03-03
  • use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information...
    2007-06-06
  • JS数组的常用10种方法详解

    JS数组的常用10种方法详解

    这篇文章主要介绍了JS数组的常用10种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS+Canvas实现自定义头像功能

    JS+Canvas实现自定义头像功能

    本文主要为大家详细介绍了如何利用JS+Canvas实现自定义头像功能，文中的示例代码讲解详细，对我们学习有一定的帮助，感兴趣的小伙伴可以了解一下
    2022-06-06
  • js和php如何获取当前url的内容

    js和php如何获取当前url的内容

    js和php获取当前url的内容在某些特殊的情况下还是蛮实用的，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-09-09
  • js中关于一个分号的崩溃示例

    js中关于一个分号的崩溃示例

    下面的js代码不管if条件的结果是true还是false都会执行大括号的代码，结果发现if条件括号后面多写了分号，崩溃啊
    2013-11-11

最新评论