mojianpo
- 浏览: 736749 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
梦行Monxin商城系统：
java网上商城与php网上商城比较 -
梦行Monxin商城系统：
java网上商城与php网上商城比较 -
任楚娴：
你好，请问html = nvl(html); 这句中的nvl（ ...
java html串转换成文本串 -
u013246812：
，谢拉！
jQuery ui Dialog 讲解参数 -
大宝剑99：
...
前端优化
使用框架或者才采用 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操作：
<!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>
分享到：
发表评论
-
Chrome扩展程序-BES Blocker
2020-11-27 08:35 218## 使用说明 - Change the response ... -
全国最新行政区划代码（Tree）json数据以及地理数据
2020-11-11 21:23 351基于阿里提供的地理数据 http://datav.aliyun ... -
百度搜索api
2020-11-07 15:26 602<div class="iteye-blog- ... -
Puppeteer 说明记录
2020-11-06 10:52 594<div class="iteye-blo ... -
文本水印
2019-12-20 17:55 440打开控制台，copy如下代码： (functio ... -
unicode字符集特殊符号对应html/js/css符号
2019-04-24 14:46 720转自： http://www.cnblogs.com/cha ... -
网站灰度支持
2015-01-02 07:22 8281 <style>html {overflo ... -
js 端排序 获取td里边的内容去html串化
2014-09-26 18:12 816<script> function delHtml ... -
ie浏览器下的css expression使用
2014-03-06 16:39 1192针对ie浏览器有些情况下显示效果比较差，所以针对ie ... -
输入框自动填充效果 js
2013-12-28 15:58 6055<!doctype html> ... -
js 屏蔽form的onkeydown onkeyup onkeypress 的13按键
2013-07-11 10:49 1784js 屏蔽form的onkeydown onkeyup on ... -
Cookie path的设置
2013-02-21 10:58 1927cookie path 设置 IE对如下的co ... -
html5 (标签一览)
2012-10-16 19:22 1001html5 标签 按字母顺序排 ... -
一键分享腾讯微博，新浪微博等api（WEB 版）
2012-08-10 09:38 10389腾讯微博分享 <script type=" ... -
DOJO js 基本dom操作
2012-06-20 09:44 4601/** ** 基本的DOM操作只是用到了dojo的核 ... -
原始ajax api 操作
2012-04-12 18:00 1083String.prototype.trim = func ... -
js 动态 添加 删除 tr
2012-04-12 17:27 5751今天给新人出了一道题： dom 和 javascrip ... -
ie8下 vml
2012-04-01 13:51 1665近期在做web流程设计器，在ie7下没有问题，显示出来了，但是 ... -
flex vs html5
2011-12-18 18:09 2139何时使用HTML5，而不是Fl ... -
java毕业设计 计算机毕业设计 软件定制开发
2011-10-01 07:00 86工作室承接各种毕业设计以及软件定制开发。 java毕业设计 ...
相关推荐
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
本文将深入探讨如何使用JavaScript动态地向HTML表格（table）中添加`tr`（行）节点，同时结合“工具”类标签，我们可以理解这是一个关于网页开发实用技巧的主题。 首先，我们需要了解HTML表格的基本结构。一个表格...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...
使用javascript实现table动态增加删除行列。
在JavaScript的世界里，jQuery（简称jq）是一个非常流行的库，它极大地简化了DOM操作、事件处理和动画制作等任务。本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及...
总结，创建动态表格涉及的主要知识点包括： 1. DOM操作：创建元素、添加子元素、获取和设置属性。 2. `innerHTML`属性：用于插入HTML内容。 3. 事件处理：添加事件监听器，响应用户操作。 4. 动态创建按钮和设置按钮...
这种方法需要手动构建表格的结构，包括`<table>`、`<tbody>`、`<tr>`和`<td>`等元素。例如： ```javascript var a1 = document.createElement("table"); var a2 = document.createElement("tbody"); var a3 = ...
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...
在HTML中，`<table>`元素用于创建表格，而动态操作表格行通常涉及到DOM（Document Object Model）的操作。JavaScript提供了对DOM的访问和修改能力，让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...
总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...
在JavaScript编程中，动态添加`td`（表格数据单元格）和`tr`（表格行）是常见的需求，尤其在创建交互式网页时。本文将深入探讨如何利用JavaScript实现这一功能，以及它在实际开发中的应用。 首先，我们需要了解HTML...
它可能展示了如何结合HTML、CSS和JavaScript实现表格的动态操作，包括事件监听和响应式设计。 总之，理解并掌握JavaScript对HTML表格的操作对于前端开发者来说至关重要，这不仅可以提高页面的交互性，还能在数据...
介绍了JS动态创建Table,Tr,Td并赋值的具体实现，有需要的朋友可以参考一下
通常，这样的博客文章会包含如何创建表格元素，如`<table>`, `<tr>`, `<td>`等，以及如何使用JavaScript的方法如`createElement()`, `appendChild()`, 和`innerHTML`等来操作这些元素。 "源码"标签暗示我们可能可以...
在HTML中，我们可以使用`<table>`、`<tr>`、`<td>`等标签创建一个基本的表格。然后通过JavaScript获取表格元素，例如使用`document.getElementById()`或`document.querySelector()`方法。 2. **添加行** 要动态...
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...
在JavaScript中，动态添加table是一种常见的任务，尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述： 1. **HTML表格基础** 在...
例如，如果要添加一个新的表格行，我们首先需要获取到`<table>`元素，然后创建一个新的`<tr>`元素，最后使用`appendChild()`将其添加到表格中。 2. `insertRow()`和`insertCell()`：这是专用于表格操作的方法。`...
在JavaScript中，我们可以通过DOM（Document Object Model）操作来动态地向表格中添加新的行。以下是一个基本的示例： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 创建新...