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

最新推荐文章于 2023-10-26 16:28:39 发布

dq_095

最新推荐文章于 2023-10-26 16:28:39 发布

阅读量790

点赞数 1

分类专栏： HTML JavaScript

本文链接：https://blog.csdn.net/qq_37968920/article/details/82749270

版权

HTML 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<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>

dq_095

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现动态增加文件域表单

&lt;html&gt;&lt;head&gt; &lt;title&gt;动态添加表单元素&lt;/title&gt;&lt;/head&gt;&lt;script language="javascript"&gt; //全局变量，代表文件域的个数，并用该变量区分文件域的name属性 var file_count = 0; //增加文件域
复制链接

扫一扫

专栏目录