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