閱讀145 返回首頁    go 阿裏雲 go 技術社區[雲棲]

使用DOM動態創建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");
//給input加上value=“瀏覽”屬性
input1.setAttribute("value","瀏覽");
//將創建的第一個td追加到tr1
td1.appendChild(input1);
tr1.appendChild(td1);
//再次創建一個td
var td1=document.createElement("td");
//創建input標簽
var input1=document.createElement("input");
//給input加上type=“button” 和value=“刪除”屬性
input1.setAttribute("type","button");
input1.setAttribute("value","刪除");
//給input添加上nclick事件，將this傳過去，也就是標簽對象input，到時候執行那個input就將那個input對象傳過去
input1.setAttribute("onclick","delFile(this)");
//將input追加給td
td1.appendChild(input1);
//再講td追加給tr1
tr1.appendChild(td1);
//最後將tr1追加給table
document.getElementById("id2").appendChild(tr1);

}
  
  
  
function delFile(this1){
    //this1接受onclik事件傳過來的值，也就是被執行的那個input對象
    //我們要刪除的是tr標簽，所以經過input標簽找到input的父標記td
    //再經過td找到td的父標記tr，在找到tr的父標記table，根據關係就是input的大爺table~
    var p=this1.parentNode;
     var p2=p.parentNode;
     var p3=p2.parentNode;
    //刪除執行刪除標簽所屬的tr標簽，保存刪除標簽的結果
    var element=p3.removeChild(p2);
    }
</script>
</head>
<body>
<div >
<table >
<tr>
<td><input type="file" value="瀏覽"></td>
<td><input type="button" value="添加" ></td>
</tr>
</table>
</div>
</body>
</html>


 

最後更新：2017-04-02 17:28:36

  上一篇：go Android 屏蔽 Home 按鍵
  下一篇：go Android如何在ListView中嵌套ListView