js實現(xiàn)動態(tài)增加文件域表單功能
更新時間：2018年10月22日 09:34:13 作者：dq_095
這篇文章主要為大家詳細介紹了js實現(xiàn)動態(tài)增加文件域表單功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)動態(tài)增加文件域表單的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)代碼：
<html>
<head>
<title>動態(tài)添加表單元素</title>
</head>
<script language="javascript">
//全局變量，代表文件域的個數(shù)，并用該變量區(qū)分文件域的name屬性
var file_count = 0;
//增加文件 域
function additem(id) {
if (file_count > 9) {
alert("最多10個 ");
return;
}
//定義行變量row；單元格變量cell；單元格內(nèi)容變量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" + '"' + ");'>";
//文件域個數(shù)增加
file_count++;
//設置單元格的innerHTML為str的內(nèi)容
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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要給大家介紹了關于JS中多層次排序算法的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了JS實現(xiàn)的集合去重，交集，并集，差集功能,結合實例形式分析了javascript基于數(shù)組實現(xiàn)的集合去重、交集、并集、差集等相關實現(xiàn)技巧,需要的朋友可以參考下2018-03-03
js split就是將一字符串以特定的字符分割成數(shù)組,數(shù)組一般是字符串處理比較常用的處理方法2013-03-03
js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
在js中數(shù)組遍歷最簡單的辦法就是使用for然后再利用arr.length長度作為for最大限度值即可解決了，下面我們來看看一些有用的實例2014-01-01
大家經(jīng)常用js實現(xiàn)打字機效果，最近發(fā)現(xiàn)這個不錯2008-06-06
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
微信小程序 wx.getUserInfo引導用戶授權問題實例分析
這篇文章主要介紹了微信小程序 wx.getUserInfo引導用戶授權問題,結合實例形式分析了微信小程序使用wx.getUserInfo引導用戶授權問題的具體操作步驟與實現(xiàn)方法,需要的朋友可以參考下2020-03-03
解決option標簽selected="selected"屬性失效的問題
下面小編就為大家?guī)硪黄鉀Qoption標簽selected="selected"屬性失效的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
這篇文章主要為大家詳細介紹了JavaScript運動框架的第一部分，解決速度正負取整問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在 TypeScript 中，有兩種主要的定義自定義類型的方式，接口和類型，盡管它們在外觀上可能相似，但它們之間有一些關鍵的區(qū)別，本文就詳細的介紹一下，感興趣的可以了解下2023-05-05