`
liss
  • 浏览: 844267 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript操作Table:添加、修改、删除Table元素

阅读更多

方法一: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);

 

JavaScript:操作Table(二):使用DOM对象(Table、TableRow、TableCell)

<html>
    <head>
        <title>Table Test</title>
       
        <script type="text/javascript">
            function $(id) {
                return document.getElementById(id);
            }
           
            function testTable() {
                var tb1 = $("tb1");//Table对象
                tb1.createCaption() .innerHTML = "标题";
                //tb.deleteCaption() ;
                var tr = tb1.rows ;//TableRow对象数组
                //alert(tb1.rows.length );//0
                tb1.insertRow(tb1.rows.length).innerHTML = "<td>行</td>";
                //alert(tb1.rows.length);//1
                tb1.insertRow (tb1.rows.length).innerHTML = "<td>行2</td>";
                //tb1.deleteRow (0);
            }
           
            function testTableRow() {
                var tb1 = $("tb1");//Table对象
                var tr = tb1.rows;//TableRow对象数组
                //alert(tr[0].rowIndex );//行号
                var td = tr[0].cells;//TableCell对象数组
                //alert(td.length);
                tr[0].insertCell(0) .innerHTML += " td add"
                tr[1].insertCell(1).innerHTML += " td add"
                //tr[1].deleteCell(0) ;
            }
           
            function testTableCell() {
                var tb1 = $("tb1");//Table对象
                var tr = tb1.rows;//TableRow对象数组
                var td = tr[0].cells ;//TableCell对象数组
                alert(td[0].cellIndex );//单元格编号
                td[1].colSpan = "2";
                td[0].rowSpan = "2";
            }
           
            window.onload = function() {
                testTable();
                testTableRow();
                testTableCell();
            }
        </script>       
    </head>
   
    <body>
        <input type="button" value="test" onclick="testTable()"/>
        <table id="tb1" border="1" background="#fff">
           
        </table>
    </body>
</html>

分享到:
评论

相关推荐

    javascript对table的添加,删除行的操作

    在JavaScript中,对HTML表格(`&lt;table&gt;`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...

    javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...

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

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    JavaScript动态操作表格,添加,删除行、列及单元格

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`&lt;table...

    javascript 操作 table

    javascript 操作 table的一个例子. 可以下去研究下

    使用javascript脚本操作table

    使用javascript脚本向页面中的table添加和删除行

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    table动态添加行并编辑

    JavaScript(js)作为客户端脚本语言,使得我们能够实现表格的动态交互功能,如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中,`&lt;table&gt;`元素用于创建表格,但...

    JavaScript操作select&&table

    通过JavaScript可以对这些下拉列表进行动态操作,包括添加选项、删除选项、获取选中的值等。下面将详细介绍如何使用JavaScript来操作`&lt;select&gt;`元素。 ##### 1. 创建Select元素 ```javascript function create...

    javascript操作table(增加/删除行/单元格)

    对表格的行和列进行插入/删除,并对每行添加行号

    javascript 操作 Table 排序

    在JavaScript中,操作HTML表格(Table)进行排序是一项常见的任务,尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先,我们需要理解HTML表格的基本结构。一个HTML...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    javascript 操作table的特性.docx

    ### JavaScript操作Table的特性 #### 一、概述 在Web开发中,`&lt;table&gt;`元素是一种常见的HTML结构,用于展示数据。随着JavaScript的发展,我们可以通过脚本来动态地控制表格的行为和外观,从而实现更加丰富的用户...

    table里面获取所有元素

    在HTML中,`&lt;table&gt;`元素是创建表格的基础,而获取表格中的所有元素则是进行数据操作、事件绑定或者样式修改等任务时常常遇到的需求。这篇博客“table里面获取所有元素”可能探讨了如何在JavaScript或相关的前端技术...

    javascript动态添加table

    在JavaScript中,动态添加table是一种常见的任务,尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述: 1. **HTML表格基础** 在...

    JavaScript table 动态添加行,列

    var _table=document.createElement("table"); _table.id="table2"; //设置表格属性 _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute(...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    javascript万能table合并单元格,隐藏列 html版

    此函数接受一个参数 `tableId`,即要操作的表格元素的 ID。 ```javascript function uniteTdCells(tableId) { var table = document.getElementById(tableId); for (var i = 0; i &lt; table.rows.length; i++) { ...

    table JS 添加行和删除行

    在网页开发中,JavaScript(JS)是一种不可或缺的脚本语言,尤其在处理用户交互时,如动态修改HTML元素。在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示...

Global site tag (gtag.js) - Google Analytics