用javascript DOM實現添加多個附件並與刪除 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用DOM方法實現多附件上傳客戶端</title>
<script language="javascript" type="text/javascript">
function addFile(){
//創建tr標簽
var tr1=document.createElement("tr");
//創建td標簽
var td1=document.createElement("td");
//創建input標簽
var input1=document.createElement("input");
//給input加上type=file屬性
input1.setAttribute("type","file");
//將創建的第一個td追加到tr1
td1.appendChild(input1);
tr1.appendChild(td1);
//再次創建一個td
var td1=document.createElement("td");
//創建input標簽
var input2=document.createElement("input");
//給input加上type="button" 和value="刪除"屬性
input2.setAttribute("type","button");
input2.setAttribute("value","刪除");
//給input添加上nclick事件,將this傳過去,也就是標簽對象input,到時候執行那個input就將那個input對象傳過去
input2.setAttribute("onclick","delFile(this)");
//將input追加給td
td1.appendChild(input2);
//再講td追加給tr1
tr1.appendChild(td1);
//最後將tr1追加給table
document.getElementById("id2").appendChild(tr1);
}
   
   
   
function delFile(this1){
    var p=this1.parentNode;
     var p2=p.parentNode;
     var p3=p2.parentNode;
    //刪除執行刪除標簽所屬的tr標簽,保存刪除標簽的結果
    var element=p3.removeChild(p2);
    }
</script>
</head>
<body>
<p id="id1">
<table id="id2">
<tr>
<td><input type="file" value="瀏覽"></td>
<td><input type="button" value="添加" onclick="addFile()"></td>
</tr>
</table>
</p>
</body>
</html>

摘自 youngerhao的專欄

發佈留言