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

最新推荐文章于 2023-01-05 17:01:25 发布

mojp812

最新推荐文章于 2023-01-05 17:01:25 发布

阅读量113

点赞数

分类专栏： js知识文章标签： JavaScript Dojo F# 框架 HTML ViewUI

本文链接：https://blog.csdn.net/mojp812/article/details/83703518

版权

js知识专栏收录该内容

61 篇文章 0 订阅

订阅专栏

使用框架或者才采用 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);' οnclick=\"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>

mojp812

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript table 动态创建 tr ，删除tr 等相关操作

使用框架或者才采用 clonse 方式也可以实现。直接javascript操作：Insert title hereUPLOAD HTML djConfig = { isDebug: false, popup:true, parseOnLoad: true ...
复制链接

扫一扫