`

DOM创建table

阅读更多

function deleteOldTable() {
delRow = document.getElementsByTagName("table").length
//此句仅在本例中使用,因为本例中已经有一个table了,因此不能删除,需要根据情况变化一下2005.11.17
if(delRow == 1) return

var node = document.getElementsByTagName("table")[delRow-1]; //表格
var c = node.childNodes.length
for(i=0;i<c;i++)
node.removeChild(node.childNodes[0]); //删除全部单元行
}

//传入DataSet的一个实例即可
function makeTable(m_ds) {

deleteOldTable() //先清除以前的结果

var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("width","100%");

document.body.appendChild(table);
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
headerrow.insertCell(2).appendChild(document.createTextNode("工资"));

for(var i=0;i<m_ds.getCount();i++) {
var name = m_ds.getAttribute(i,"name")
var job = m_ds.getData(i,"job")
var salary = m_ds.getData(i,"salary")

var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
/*
动态添加table.将table中的text的值存入另一text中,在后台得到另一text的值
注意:1。OnChanged将“text的值存入另一text中”。如果此事件写入后台代码,将得不到。因为被postback掉了。
故先存,再运行后台代码。
2。在html中有一table,名字为filetb。
如果需要动态修改,在table里添加literal.text.
*/
var allCount;
allCount=0;
function addAttachment() {

allCount++;
var Num,p,myrow,indexnewrow,c1,c2,c3;
var rown=filetb.rows.length;

myrow=filetb.insertRow(rown-1);
myrow.id="tdt"+allCount;
myrow.name="tdt"+allCount;
myrow.className="smallFont";

c1=myrow.insertCell();
c1.width="100";
c1.align="right";
c1.innerHTML="<p align=right>代码" + (allCount) + ":";

c2=myrow.insertCell();
c2.align="left";
c2.innerHTML="<INPUT type='text' onchange='return GetValue()' style='width:200' class=t1 name=txtCode"+(allCount)+" MaxLength='50'>";

c3=myrow.insertCell();
c3.align="left";
c3.innerHTML="&nbsp;&nbsp;&nbsp;<a href='javascript:removeatt(" + allCount + ");'>删除</a>";

}

function GetValue()
{
var id;
var a;
var b;
for(i=0;i<filetb.rows.length;i++)
{
a = filetb.rows(i).cells(0).innerText;
a = a.substring(2,3);
id = "txtCode" + a;
document.all("txt").value += document.all(id).value;
}
}

function removeatt(ln)
{
var i
var tdname
var tdln
var line=ln;
if (line>0) {
for (i=0;i<filetb.rows.length;i++) {
tdname=filetb.rows[i].name;
tdln=tdname.substring(3,tdname.length);
if (tdln==line) {
filetb.deleteRow(i);
break;
}
}
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="" runat="server">
<input type=button onclick="return addAttachment()" id=btnNew value=click />
<input type=button onclick="return GetValue()" id=btnGet value=GetValue />
<input type="text" id=txt />
<table id=filetb></table>

</form>
</body>
</html>
分享到:
评论

相关推荐

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

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

    js动态创建Table

    在Web开发中,动态创建Table是一种常见的需求,特别是在数据展示或者用户交互时。本文将深入探讨如何利用纯JavaScript实现动态表格,并涵盖相关的重要知识点。 首先,我们讨论基础的DOM(Document Object Model)...

    js创建table表格

    在JavaScript中,可以使用DOM操作来动态创建这些元素。以下是一些关键步骤: 1. **创建表格元素**: ```javascript var table = document.createElement('table'); ``` 2. **创建表格行和单元格**: ```...

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

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

    使用JavaScript和DOM动态创建表格

    使用JavaScript和DOM动态创建表格

    js_HTML_Dom操作练习

    8. **表格操作**:在HTML中,`&lt;table&gt;`元素及其子元素(`&lt;tr&gt;`, `&lt;td&gt;`, `&lt;th&gt;`等)可以通过DOM进行操作,例如,添加或删除行和单元格。 9. **表单操作**:DOM也允许我们处理表单元素,如`&lt;input&gt;`, `&lt;select&gt;`, `...

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

    利用DOM操作方法如insertRow()和insertCell(),可以根据条件创建新的行和列,为表格添加新的数据项。 2. 监听事件以触发数据获取 通过在HTML元素(例如下拉框)上添加事件监听器,可以在用户交互时触发数据的动态...

    038HTML-DOM对象.doc

    Table 对象代表一个 HTML 表格,在 HTML 文档中,&lt;table&gt; 标签每出现一次,一个 Table 对象就会被创建。Table 对象的常用属性有: * cells:返回包含表格中所有单元格的一个数组 * rows:返回包含表格中所有行的一...

    Dom生成表格和实现分页源码

    总结起来,"Dom生成表格和实现分页源码"涉及的核心技术包括DOM操作(创建、插入和删除元素)、数据驱动视图(根据数据动态生成表格)、分页算法(计算页数和处理翻页逻辑)以及事件监听(响应用户分页操作)。...

    JavaScript如何动态创建table表格

    本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一:最原始的方法,通过`createElement()`函数逐个创建元素。这种方法需要手动构建表格的结构,包括`&lt;table&gt;`、`&lt;tbody&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`等元素。例如...

    DOM 详解 作者:Table of contents;Steve Byrne;Gavin Nicol。。

    DOM Core API还允许仅通过DOM API调用来构建一个Document对象,而创建文档骨架并持久保存则留给实现DOM API的产品来完成。 1.1.1. DOM结构模型 DOM将文档表现为一个Node对象的层次结构,这些对象同时实现了更专门的...

    table2Excel.rar

    在某些情况下,如果页面中存在多个表格,或者表格的DOM结构复杂,可能无法正确识别到用户期望导出的表格。解决这个问题的关键在于,我们需要为指定的表格添加标识,并在调用Table2Excel.js时传入正确的参数。 以下...

    bootstrap table 分页栏修改

    Bootstrap Table是一种基于HTML5和Bootstrap框架的开源JavaScript插件,用于创建功能丰富的表格。它提供了数据的排序、筛选、分页等功能,使网页中的数据展示更加灵活和互动。在本项目中,我们关注的是如何自定义...

    bootstrap-table案例

    4. **HTML结构**:使用Bootstrap Table时,首先需要在HTML中创建一个`&lt;table&gt;`元素,并设置相应的类名(如`table`、`table-striped`、`table-bordered`等)以应用Bootstrap样式。然后,可以使用特定的属性(如`data-...

    vue-easytable合并单元格

    在`render`方法中,可以判断当前行和列的条件,返回不同的DOM结构,从而实现单元格的合并。例如,如果某一列需要在特定行合并多个单元格,可以在`render`函数内使用`&lt;tr&gt;`和`&lt;td&gt;`元素,并根据需要设置`rowspan`和`...

    oracle 使用XMLDOM包,保存XML节点数据到数据库表中,支持多个节点嵌套XML格式

    它主要用于创建、读取、修改和遍历XML文档对象模型(DOM)。 ##### 2. XML数据示例 假设我们接收到的XML数据如下所示: ```xml 张三 &lt;age&gt;30 北京市 李四 内科 ``` ##### 3. XMLDOM包处理步骤 1....

    浅谈vue的iview列表table render函数设置DOM属性值的方法

    总结来说,当在iview的Table组件中使用render函数来创建元素,并且需要设置DOM属性时,应将这些属性值放在h函数的第二个参数对象的domProps属性中。这一方法的运用不仅限于img标签和src属性,对于其他需要设置DOM...

    DOM常用属性和方法

    DOM提供了多种方法来帮助开发者创建、检索、修改或删除文档中的节点。以下是一些常用的DOM方法和属性: ##### Document对象的关键方法 - **createAttribute(name)**: 创建一个新的属性节点。 - **createComment...

Global site tag (gtag.js) - Google Analytics