`
jslfl
  • 浏览: 322422 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js增删table方法

    博客分类:
  • web
F# 
阅读更多
//新增加一行(注意第一行有时做为表头)
    function f_addRow(tableId,maxRc) {  
        var tbl = document.getElementById(tableId).tBodies[0];
        var rc = tbl.rows.length;
        if(maxRc != 0 && rc >= maxRc){
        alert("不能再添加行,只允许有"+maxRc+"行");
        return;
        }
        try {  
            var newNode = tbl.rows[rc-1].cloneNode(true);
            f_clearInputs(newNode);
            tbl.appendChild(newNode);  
        }  
        catch(e) {  
            alert(e.message);  
        }  
    }  

//删除行,最少剩余行数(注意第一行有时做为表头)
    function f_delRow(tableId,leastRc) {  
        var tbl = document.getElementById(tableId).tBodies[0];  
        var index = tbl.rows.length;
        if(index <= leastRc){
        alert("不能删除,必须保留一行");
        return;
        }
        tbl.deleteRow(index - 1);  
    }
   
    //清除表单数据
    function f_clearInputs(p_node) {  
        var i, elm, elements;  
        elements = p_node.getElementsByTagName('input');
        for( i=0, elm; elm=elements.item(i++); )  
        {  
            if (elm.getAttribute('type') == "text")  
            {  
                elm.value = '';  
            }  
        }
        elements = p_node.getElementsByTagName('select');  
        for( i=0, elm; elm=elements.item(i++); )  
        {  
            elm.options.selectedIndex=0;  
        }
    }
分享到:
评论

相关推荐

    BootStrapTable实现增删改查

    在MVC(Model-View-Controller)架构中,结合C#后端,BootstrapTable可以实现数据的增删改查操作,提供用户友好的界面和高效的后台处理。 1. **BootstrapTable的基本结构** BootstrapTable的核心是HTML的`&lt;table&gt;`...

    table表单增删行列例子

    总结,实现HTML表格的动态增删行列,关键在于理解和熟练运用JavaScript对DOM的操作。结合CSS和前端框架,可以创建出功能强大且用户体验良好的交互式表格。实际项目中,根据需求可以选择不同的实现方式,确保功能的...

    js实现对表格的增删查改

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

    动态增删table以及后台传值和弹出窗口父子窗口传值

    在IT行业中,动态增删table和后台传值是前端与后端交互的重要技术,而弹出窗口父子窗口之间的数据传递则是提升用户体验的关键。下面将详细解释这些知识点。 首先,动态增删table是一种常见的用户界面设计,它允许...

    bootstrap 带增删改查 表格

    在Bootstrap3.0插件完整版demo中,你可能找到各种实现增删改查功能的例子,包括使用不同插件、不同方法以及与后端交互的示例。这些示例可以帮助你理解和实践如何在实际项目中有效地运用Bootstrap和相关工具。 总结...

    javascript控制增删行

    ### 标题解析:“javascript控制增删行” 这个标题简洁明了地指出了本文的核心内容:如何使用JavaScript来增加或删除HTML表格中的行。这种功能在表单设计、数据输入界面等方面尤为常见,能够极大地提升用户体验和...

    JavaScript写的table增、批量删、模糊查询、文本框编辑

    ### JavaScript 实现的 Table 功能详解 在现代 Web 开发中,使用 JavaScript 来操作 DOM(文档对象模型)是常见的需求之一。通过 JavaScript,开发者可以动态地创建、更新或删除 HTML 元素,从而实现更加丰富的用户...

    Vs Code Vue实现增删改查

    6. **方法定义**:在组件的脚本部分,定义处理增删改查的方法,如`addItem()`,`deleteItem(id)`,`editItem(item)`,`saveItem(item)`。 7. **事件处理**:使用`v-on`指令监听用户操作,如`v-on:click="addItem"`。也...

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

    在JavaScript中,我们可以使用DOM操作来对表格进行增删操作。以下是一个简单的增加行的示例: ```javascript function addRow(tableId, data) { var table = document.getElementById(tableId); var newRow = ...

    js+html写的实现表格的动态增删改查和表单验证

    然而,要实现动态增删改查,我们需要利用JavaScript。通过DOM(Document Object Model)操作,可以添加、删除或修改表格的行(`&lt;tr&gt;`)和单元格(`&lt;td&gt;`)。例如,可以添加一个“新增”按钮,当点击时,JS函数会在...

    table动态增加删除行列

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

    js 动态表格增 删 查 改

    二、表格数据的增删 1. **增加**:当需要向表格添加新行时,可以先创建一个包含所有必要单元格的新`&lt;tr&gt;`元素,然后将其添加到`&lt;tbody&gt;`或特定的表格行中。例如: ```javascript let newRow = document....

    jquery对表格行增删操作

    本文将深入探讨如何使用jQuery实现表格行的增删功能,以及多选删除的实现方法。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据)元素组成。例如...

    php+mysql+bootstrap+jquery实现增删查改的前后端

    在本项目中,我们主要探讨如何使用PHP、MySQL、Bootstrap和jQuery这四个技术栈来构建一个功能完善的前后端系统,实现数据的增删查改(CRUD)操作。以下是关于这些技术及其相互配合的详细说明。 **PHP**: PHP是一种...

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

    本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能,这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`&lt;table&gt;`元素创建表格结构,包括`&lt;thead&gt;`定义表头,`...

    js 动态增删表格行

    js 动态按行增删表格,删除使用复选框选中删除

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    在这个自定义绑定中,初始化方法init会使用jQuery来初始化BootstrapTable实例,并将bootstrapTable方法添加到ViewModel中,以便可以在后续代码中调用它。 3. 通过自定义的ko.bootstrapTableViewModel方法,创建了一...

    对vue + elementUI的表格常规增删改查优化封装

    对vue + elementUI的表格常规增删改查优化封装

    纯原生js实现table表格的增删

    在JavaScript中,实现对HTML表格(table)的增删操作是一项常见的任务,尤其在不依赖于像jQuery这样的库时。这个场景中,实习生提出的问题是如何使用纯原生JS来完成这个功能,主要涉及到DOM操作、事件处理以及浏览器...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

Global site tag (gtag.js) - Google Analytics