`

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 = "&nbsp;";
}
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>
分享到:
评论

相关推荐

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格(table)的DOM结构,并且在表格行(tr)中添加可点击的按钮。这通常用于展示数据集,允许用户进行交互操作,比如删除、编辑或查看详情。 首先,我们需要...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    javascript动态添加tr节点

    本文将深入探讨如何使用JavaScript动态地向HTML表格(table)中添加`tr`(行)节点,同时结合“工具”类标签,我们可以理解这是一个关于网页开发实用技巧的主题。 首先,我们需要了解HTML表格的基本结构。一个表格...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    js的节点操作动态创建table表格,创建行,删除行.pdf

    JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息,我们可以总结出以下知识点: 1. 节点操作 在 HTML 文档中,所有内容都是节点,包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    js动态创建Table

    总结,创建动态表格涉及的主要知识点包括: 1. DOM操作:创建元素、添加子元素、获取和设置属性。 2. `innerHTML`属性:用于插入HTML内容。 3. 事件处理:添加事件监听器,响应用户操作。 4. 动态创建按钮和设置按钮...

    jq 隐藏table中的tr或td

    在JavaScript的世界里,jQuery(简称jq)是一个非常流行的库,它极大地简化了DOM操作、事件处理和动画制作等任务。本篇文章将详细讲解如何在不预先知道table ID的情况下,使用jQuery来隐藏table中的tr或td元素,以及...

    JS动态添加tr

    在JavaScript中,我们可以通过DOM(Document Object Model)操作来动态地向表格中添加新的行。以下是一个基本的示例: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 创建新...

    JavaScript如何动态创建table表格

    这种方法需要手动构建表格的结构,包括`&lt;table&gt;`、`&lt;tbody&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`等元素。例如: ```javascript var a1 = document.createElement("table"); var a2 = document.createElement("tbody"); var a3 = ...

    JavaScript获取tr td 的三种方式全面总结(推荐)

    /* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...

    JavaScript table 动态添加行,列

    var _tr=_table.insertRow(i); //创建八列 for(var j=0;j;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement...

    javascript_动态创建表格

    这两种方法是创建动态表格的主要方式之一。它们允许你在表格中添加新的行 (`&lt;tr&gt;` 元素) 和单元格 (`&lt;td&gt;` 或 `&lt;th&gt;` 元素)。 - **`insertRow()`** 方法:此方法用于在指定的位置插入一个新的 `&lt;tr&gt;` 元素。 - ...

    JS动态创建Table,Tr,Td并赋值的具体实现

    使用JavaScript可以创建动态的HTML内容。文档展示了通过JavaScript函数getzts()和callback5()来动态生成表格(Table),以及表格的行(Tr)和单元格(Td)。利用DOM操作方法如insertRow()和insertCell(),可以根据...

    js控制table的tr变色

    在 Web 开发中,通过 JavaScript 动态地改变表格 (`table`) 的样式是一种常见的操作。这种方式可以增强用户体验,使得数据展示更加直观、友好。本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) ...

    JavaScript动态添加删除表格行

    在HTML中,`&lt;table&gt;`元素用于创建表格,而动态操作表格行通常涉及到DOM(Document Object Model)的操作。JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...

    javascript动态操作表格

    总的来说,JavaScript动态操作表格涉及创建、删除、选择和更新表格元素,这些都需要对DOM有深入理解。在实际应用中,还要考虑浏览器兼容性,特别是对于较旧的浏览器,如IE6和早期的Firefox版本。通过合理使用...

    动态添加 td tr 表格 javascript

    在JavaScript编程中,动态添加`td`(表格数据单元格)和`tr`(表格行)是常见的需求,尤其在创建交互式网页时。本文将深入探讨如何利用JavaScript实现这一功能,以及它在实际开发中的应用。 首先,我们需要了解HTML...

    javascript对table的添加,删除行的操作

    它可能展示了如何结合HTML、CSS和JavaScript实现表格的动态操作,包括事件监听和响应式设计。 总之,理解并掌握JavaScript对HTML表格的操作对于前端开发者来说至关重要,这不仅可以提高页面的交互性,还能在数据...

    老裴帮助关于Javascript动态创建表格的小练习

    通常,这样的博客文章会包含如何创建表格元素,如`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`等,以及如何使用JavaScript的方法如`createElement()`, `appendChild()`, 和`innerHTML`等来操作这些元素。 "源码"标签暗示我们可能可以...

Global site tag (gtag.js) - Google Analytics