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

2024-02-26 18:12:52

本文实例为大家分享了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>

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

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:单元
js实现动态增加文件域表单功能

本文实例为大家分享了js实现动态增加文件域表单的具体代码,供大家参考,具体内容如下实现代码: <html> <head> <title>动态添加表单元素</title> </head> <script language="javascript"> //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 var file_count = 0; //增加文件域 function additem(id)
jquery 动态增加,减少input表单的简单方法(必看)

html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m
JS实现动态增加和删除li标签行的实例代码

如下所示: function addDepartment() { <span style="white-space:pre"> </span>var x = document.getElementById('department'); <span style="white-space:pre"> </span>var l = x.childNodes.length; <span style="white
[JS]实现动态增加框架！未完成

function test(){ document.frames.srcFra.document.open(); document.frames.srcFra.document.write(" 5 "); document.frames.srcFra.document.close(); } [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
动态增加/删除文件域

LEDADBBS网友提供的一个动态增加/删除文件域的代码,还不错,收藏一下. function additem(id){ var row,cell,str; row = eval("document.all["+'"'+id+'"'+"]").insertRow(); if(row != null ){ cell = row.insertCell(); str="" cell.innerHTML=str; } } functi
js简单实现表单中点击按钮动态增加输入框数量的方法

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
jQuery解析XML文件同时动态增加js文件的方法

本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj) { var field = $(this); var funcName = field.at
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码. HTML的代码: <form id="ff" runat="server" method="post"> <div id="content" style="margin-left:50px;"> <table style="width:300px;" id=&quo
用JavaScript动态建立或增加CSS样式表的实现方法

1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ; //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

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

相关推荐

随机推荐