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