javascript table 动态创办 tr ，删除tr 等相关操作

javascript table 动态创建 tr ，删除tr 等相关操作
使用框架或者才采用 clonse 方式也可以实现。
直接javascript操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<head>
<title>UPLOAD HTML</title>
<link href="dojo-release-1.5.0/dijit/themes/dijit.css" rel="stylesheet" />
<link href="dojo-release-1.5.0/dijit/themes/tundra/form/Button.css"
rel="stylesheet" />
<link href="dojo-release-1.5.0/dijit/themes/tundra/ProgressBar.css"
rel="stylesheet" />
<script>
        djConfig = {
            isDebug: false,
popup:true,
            parseOnLoad: true
        }
    </script>
<script src="dojo-release-1.5.0/dojo/dojo.js"></script>
<script>
        dojo.require("dojox.form.FileUploader");
        dojo.require("dijit.form.Button");

        dojo.addOnLoad(function(){

var props = {
uploadUrl:"test/uploadFile.action",
fileMask:[
["All Images", "*.jpg;*.jpeg;*.gif;*.png"]
],
deferredUploading:false,
degradable:true,
                uploadOnChange:false,
                selectMultipleFiles:true,
                devMode:true,
                isDebug:false,
                showProgress:false
};

if(dojo.byId("btnF")){
var f = new dojox.form.FileUploader(props, "btnF");
dojo.connect(dijit.byId("fSubmit"), "onClick", function(){
alert('click');
var param = {author:dojo.byId('author').value};
f.upload(param);
});
dojo.connect(f, "onChange", function(dataArray){
alert("onChange");
                     dojo.forEach(dataArray, function(d){
                         alert(d);
                    addTr(d);
                     });

});
dojo.connect(f, "onComplete", function(dataArray){
alert("onComplete:" + dataArray);
dojo.forEach(dataArray, function(d){
alert(d);
});
});
}

});

function addTr(objFile){
alert("add");
var table = document.getElementById("tableBody");
var tr = document.createElement('tr');
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML = objFile.name;
var td2 = document.createElement('td');
tr.appendChild(td2);
if(objFile.size){
td2.innerHTML = Math.ceil(objFile.size*.001)+"KB";
}else{
td2.innerHTML = " ";
}
var td3 = document.createElement('td');
tr.appendChild(td3);
var delHref = "<a href='javascript:void(0);' onclick=\"delTR(this);\">删除</a>";
td3.innerHTML = delHref;
}

function delTR(obj){
alert("del");
var table = document.getElementById("tableBody");
var selectedTr = obj.parentElement.parentElement;
table.removeChild(obj.parentElement.parentElement);
}


    </script>
</head>
<body class="tundra">
<table class="tbl">
<tr>
<td>
<form id="formF" class="form"><label>作者:</label> <input
class="field" type="text" value="" id="author" name='author' /><br />
<div tabIndex="5" id="btnF" class="btn">浏览</div>
<button tabIndex="6" id="fSubmit" class="btn"
dojoType="dijit.form.Button">提交</button>
</form>
</td>
</tr>
</table>

<p>上传文件列表</p>
<table border="1" bordercolor='#000000' align="center"
style="border-collapse: collapse; width: 500px">
<thead>
<th>文件名</th>
<th>大小</th>
<th>操作</th>
</thead>
<tbody id="tableBody">

</tbody>
</table>
</body>
</html>

javascript table 动态创办 tr ，删除tr 等相关操作

相关推荐