`

js对表格的操作

 
阅读更多
http://dikar.iteye.com/blog/143593
function creatTable()   
{   
//用createElement函数创建tbody,tr,td,textNode元素   
//关于各元素的意义不在此描述   
    
  var tbody= document.createElement("tbody");   
  var row=document.createElement("tr");   
  var cell=document.createElement("td");   
  var textNode=document.createTextNode("test");   
 //可用于理解textNode   
 //alert(textNode.length); 这里是test的长度4   
 //alert(textNode.toString());当然就是test了   
    
 //因为各元素都是节点与子节点的关系所以用appendChild()函数将各节点连接起来   
  cell.appendChild(textNode);   
  row.appendChild(cell);   
  tbody.appendChild(row);   
  
//现在可以将创建好的TBODY元素加入指定ID的table中了   
document.getElementById("ww").appendChild(tbody);   
 }




http://www.iteye.com/topic/319182
方法一:DOM实现
//先获取该表格的引用:
var Container = document.getElementById(TableId);

//然后创建行(TR对象)
var NewTr = document.createElement("tr");

//填充该表格行
var NewTd1 = document.createElement("td");
var NewTd2 = document.createElement("td");
......
NewTr.appendChild(NewTd1);
NewTr.appendChild(NewTd2);
...... 
下面要做的是继续填充新建好的单元格
另外一种填充表格行的方式是
NewTr.innerHTML = " ........ ";

接下来,要在DOM树中指定NewTr的父节点,
在表格的DOM中,TR的父结点应该是TBODY这个几乎被遗忘的对象.
var LastTr = Container.rows[Container.rows.length - 1];
LastTr.parentNode.appendChild(NewTr);
 
 
通常来讲,从表格中删除某一行一般是通过表格的deleteRow()方法和行的rowIndex属性来删除,如下,欲删除刚刚添加的新行:

var Container = document.getElementById(TableId);
var LastTrIndex = Container.rows.length - 1; // 表格最后一行
Container.deleteRow(LastTrIndex);

分享到:
评论

相关推荐

    js简单表格操作

    在JavaScript(简称JS)中,表格操作是网页动态交互中常见的功能,主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作,帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    js实现对表格的增删查改

    "js实现对表格的增删查改"这个主题,就是关于如何利用JavaScript来管理HTML表格中的数据,提供用户友好的数据操作功能。 首先,我们来理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始,`<tr>`标签定义每...

    js操作表格

    js操作表格 实例 js操作表格 实例 js操作表格 实例

    纯js电子表格操作

    "纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据,如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**: js-xlsx是JavaScript的一个开源库,专门用于处理Excel...

    javascript实现表格添加删除等操作

    3. **表格操作**: - **创建新行**:要向表格添加行,首先需要创建一个新的`<tr>`元素,然后创建`<td>`元素并设置其内容。最后,将这些元素添加到表格的`<tbody>`标签内。 - **删除行**:通过获取行的引用(例如,...

    javascript经典表格操作

    9. **数据绑定**:更高级的实现可能涉及到数据绑定,如使用MVVM框架(如Vue.js或React.js),这样可以将数据与视图分离,实现更高效且易于维护的表格操作。 10. **兼容性考虑**:在编写JavaScript代码时,要确保其...

    JS操作Word生成表格

    在IT行业中,JavaScript(简称JS)通常用于网页前端交互,但通过特定的库和API,我们也能使用JS来操作Microsoft Word文档,包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能,以及相关的...

    JavaScript操作表格

    本篇内容主要介绍了使用JavaScript进行表格操作的方法,包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术,可以实现更加灵活的...

    js表格操作,DOM实现数据动态增删查改

    通过以上步骤,你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求,为用户提供直观的界面和流畅的操作体验。在实际项目中,可能还需要处理更复杂的交互逻辑,如表单验证...

    javascript动态操作表格

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

    JS DOM 表格操作

    1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考

    Js表格操作

    包括js动态表格的操作。数据的复制

    js操作表格, 带初始化的

    在JavaScript编程中,操作表格是一项常见的任务,尤其是在网页交互和数据展示方面。...通过实践和查阅相关资源,你可以进一步提升在JavaScript表格操作方面的技能。记住,持续学习和实践是成为IT行业大师的关键。

    js简单的表格操作

    在JavaScript中进行简单的表格操作是Web开发中常见的需求,它涉及到HTML、CSS和JavaScript的结合。这篇博文将探讨如何利用JavaScript来创建、编辑和操作HTML表格。首先,我们需要理解HTML表格的基本结构,它由`...

    js操作表格的方法介绍

    在JavaScript中,操作表格是一种常见的任务,特别是在网页交互和数据展示方面。这篇博客将深入探讨如何使用JavaScript来创建、修改和操作HTML表格。首先,我们需要理解HTML表格的基本结构,包括`<table>`, `<tr>`, `...

    JS实现的表格行上下移动操作示例

    本篇文章通过一个简单的实例,展示了如何使用JavaScript实现表格行上下移动的操作,涉及到了对页面元素节点及属性的操作技巧。 首先,我们来看一个简单的表格示例,它包含了几个表格行(`<tr>`)和单元格(`<td>`)...

    js 添加删除表格

    此外,对于更复杂的表格操作,如添加或删除列,可以使用类似的方法,但需要考虑到列的同步调整,确保数据的对齐。总的来说,JavaScript提供了强大的DOM操作能力,使得我们可以灵活地控制网页中的HTML元素,包括动态...

    javascript 表格操作

    在探讨“javascript表格操作”这一主题时,我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点: ### 动态插入行与删除行 #### 插入行:`insertRow()` -...

Global site tag (gtag.js) - Google Analytics