`
mhbjava
  • 浏览: 96583 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

DOM创建table

阅读更多

Dom笔记:

1。document.body可以直接定位到body 节点,如:onclick="reverseNode(document.body)"

var c = node.removeChild(kids[i]) //删除子节点,保存在c中 。要删除的东西有返回值

2。var kid1 = table1.firstChild.firstChild.firstChild//定位到<td>节点
   var kid2 = table2.firstChild.firstChild.firstChild//定位到<td>节点
   var repKid = kid2.firstChild //定位到表格二<td>内容的TextNode节点
   kid1.replaceChild(repKid,kid1.firstChild);//用表格二的单元格内容替换表格一的单元格内容,表格二变成没有单元格内容

   //下面注释如果开发,将出现object error ,因为表格二已经被改变,它已经没有子节点了 (注意:没有子节点的就一定不能调用firstChild)

   //kid2.replaceChild(kid1.firstChild,kid2.firstChild);


3.<tbody>隐含存在<table></table>  firstChild为<tbody>

4. var node = document.getElementByTagName("table")[0];
   node.removeChild(node.childNodes[0]);//删除全部单元格
   var header = node.createTHead()//新建表格行头
   var headerrow = header.insertRow(0);//插入一个单元行
   var cell = headerrow.insertCell(0)//插入一个单元格


5.parNode.insertBefore(tbody,parNode.firstChild)将节点tbody插入到节点顶部
  <td>内部的是<TextNode>节点

 




分享到:
评论

相关推荐

    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....

    改变el-table宽度

    在Vue.js框架中,结合Element UI库,我们可以创建高度可定制化的表格组件。在给定的场景中,开发者想要实现一个功能,即允许用户通过拖动表格列宽来调整列的宽度,并将这些自定义设置保存到浏览器的localStorage中,...

    DOM常用属性和方法

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

    JavaScript程序设计——DOM访问实验报告.docx

    - `getElementsByTagName(tagName)`: 这个方法用于获取文档中所有指定标签名的元素,如示例所示,获取所有`&lt;table&gt;`元素。 - `getAttribute(name)` 和 `setAttribute(name, value)`: 分别用于获取和设置元素的属性...

Global site tag (gtag.js) - Google Analytics