`

Javascript Table操作

JavaScriptJ#HTML 
阅读更多 
// 取得页面元素
function GetObj(objName) {
    if (document.getElementById) {
        return eval('document.getElementById("' + objName + '")')
    }
    else {
        return eval('document.all.' + objName)
    }
}

//动态添加表格
function addTable() {
    var dytable = GetObj("dyTable");
    //创建Table对象
    var tableNode = document.createElement("table");

    /* 设置 table 属性 */
    tableNode.id = "otable";
    tableNode.border = "1";
    tableNode.cellPadding = "1";
    tableNode.cellSpacing = "1";


    if (!dytable.hasChildNodes()) {

        dytable.appendChild(tableNode);
    }

    for (var i = 0; i < 6; i++) {
        //添加行
        var newRow = tableNode.insertRow(-1);

        //添加第一列
        var newCell = newRow.insertCell(-1);
        newCell.width = "100";
        newCell.innerHTML = "Line " + (i + 1);
        
        //添加删除按钮
        var delCell = newRow.insertCell(-1);
        delCell.width = "100";
        delCell.innerHTML = "<input type=\"button\" name=\"delrow\" value=\"删除\" id=\"delrow\" onclick=\"delRowEvent(this)\" />";
    }
}

//动态复制行
function cloneRow() {
    var tableNode = document.getElementById("otable");
    if (tableNode) {
       //获取要复制的行
        var tableRow = tableNode.rows[tableNode.rows.length - 1];
        var newRow = tableRow.cloneNode(true);
        //在tableRow的前面添加一行
        tableRow.parentNode.insertBefore(newRow, tableRow);
        //在tableRow的后面添加一行
//        tableRow.parentNode.insertBefore(newRow, tableRow.nextSilbing);
    }
    else {
        alert("没有找到表格");
    }
}

//动态添加行
function addRow() {
    var tableNode = document.getElementById("otable");
    if (tableNode) {
        var tableRow = tableNode.rows[tableNode.rows.length - 1];
        var newRow = tableRow.cloneNode(false);
        var newCell_1 = newRow.insertCell(0);
        var newCell_2 = newRow.insertCell(1);
        
        /* Table 列的内容 */
        newCell_1.innerHTML = "Cell_1";
        newCell_2.innerHTML = "Cell_2";
        
        //添加行
        tableRow.parentNode.insertBefore(newRow, tableRow);
    }
    else {
        alert("没有找到表格");
    }
}

//删除表格行
function delRowEvent(obj) {
    if (confirm("确认要删除吗？")) {
       //获取行索引
        var element = obj.parentNode.parentNode.rowIndex;
        GetObj("otable").deleteRow(element);
    }

}



<body>
    <div id="dyTable"></div>
    <input type="button" id="addtb" value="动态生成表格" onclick="addTable()" />
    <br />
    <input type="button" id="clonerow" value="动态复制行" onclick="cloneRow()" />
    <br />
    <input type="button" id="addRow" value="动态添加一行" onclick="addRow()" />
</body>




  • 大小: 8.5 KB
分享到：
| 学习算法之路（转载）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用javascript脚本操作table

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

    javascript 操作 table

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

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

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

    JavaScript Table行定位效果

    总的来说，实现"JavaScript Table行定位效果"涉及了JavaScript基础、DOM操作、事件处理、CSS样式控制以及性能优化等多个方面。`TableFixed.htm`文件的代码将把这些概念转化为实际的解决方案，通过分析这个文件，我们...

    javascript 操作 Table 排序

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

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中，`&lt;select&gt;`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作，包括添加选项、删除选项、获取选中的值等。...

    简单的JavaScript table

    JavaScript表格是网页动态数据展示的重要工具，特别是在网页应用中，我们常常需要动态生成或操作表格数据。本主题将深入探讨如何使用JavaScript实现简单的表格功能。 首先，HTML中的`&lt;table&gt;`元素是创建表格的基础...

    一个用于将JSON数据转换为Table的JavaScript库

    为了实现这一功能，一个名为“json-table-converter”的JavaScript库应运而生。 这个库的核心功能是将JSON对象转换为HTML表格，它提供了一种简单、高效的方法来处理这种数据转换。开发者无需手动编写繁琐的DOM操作...

    javascript 操作table的特性.docx

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

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

    - **列判断**：内层循环遍历每一行中的所有单元格 (`table.rows[i].cells.length`)，并判断是否需要对当前列执行合并操作（示例中仅对前四列执行合并操作）。 - **合并逻辑**：如果发现相邻两行的单元格内容相同，则...

    javascript Table排序

    在JavaScript中，我们可以通过DOM操作来获取这些元素，然后对它们的内容进行处理。 1. **获取表格数据**：可以使用`document.getElementById`或`querySelector`方法获取表格元素，再通过`.rows`和`.cells`属性遍历...

    javascript动态生成table及处理.

    ### JavaScript 动态生成 Table 及处理 在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`&lt;table&gt;`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...

    javascript 操作table的特性

    JavaScript 操作表格（Table）是网页动态交互中的重要一环，它允许开发者对HTML表格进行创建、修改和操控，提供了一种灵活的方式来处理数据展示。在网页开发中，JavaScript提供了丰富的API来实现对表格的控制，包括...

    给 Table 增加行的 JavaScript 函数

    JavaScript 作为浏览器端的主要脚本语言，提供了丰富的 API 和方法来操作 DOM 元素，包括表格。 在 HTML 中，`&lt;table&gt;`元素用于创建表格，而行由`&lt;tr&gt;`元素定义，单元格则由`&lt;td&gt;`或`&lt;th&gt;`元素表示。要使用 ...

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

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

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

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

    javascript table排序 2.0 (更新)

    JavaScript表格排序2.0是一个更新版本的实现，用于在网页中的HTML...通过这些更新，JavaScript Table排序2.0不仅提升了用户体验，也提供了更强大、更灵活的功能，使得开发者可以轻松地在项目中集成和定制表格排序功能。

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

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

    javascript动态操作表格

    在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`...

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中，我们首先看到了一个简单的示例，展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤： 1. **获取容器元素**：通过`...

Magicbox
Global site tag (gtag.js) - Google Analytics