JavaScript实现table动态添加、删除行

最新推荐文章于 2023-07-28 17:55:31 发布
最新推荐文章于 2023-07-28 17:55:31 发布
阅读量520 收藏 3
点赞数
分类专栏： JavaScript 文章标签： js html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40658805/article/details/112916166
版权

JavaScript实现table动态添加、删除行

效果图

点击 + 实现table添加一行，点击 - 删除本行
在这里插入图片描述

JSP文件
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>JavaScript 动态添加行、删除行</title>
  </head>
  <body>
    <div>
      <table id="tab">
        <tr>
          <td>
            <input  style="width: 50px" value="1"/>
          </td>
          <td>
            <input  style="width: 50px" value="1"/>
          </td>
          <td>
            <button type="button" lay-filter="demo2" class="layui-btn layui-btn-del" lay-filter="demo2" style="margin-left : 10px" onclick="deleteCurrentRow(this)"> - </button>
          </td>
        </tr>
      </table>
      <button type="button" class="layui-btn layui-btn-sm" onclick="appendRow()" style="margin-top : 10px"> + </button>
    </div>
    <%--此处可选择引入自己项目中的jquery.min.js文件--%>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      /* 添加行 */
      function appendRow(){
        var trHTML = '<tr>' +
                        '<td>' +
                          '<input  style="width: 50px;" value="1"/>' +
                        '</td>' +
                        '<td>' +
                          '<input  style="width: 50px;" value="1"/>' +
                        '</td>' +
                        '<td>' +
                          '<button type="button" lay-filter="demo2" style="margin-left : 10px" οnclick="deleteCurrentRow(this)"> - </button>' +
                        '</td>' +
                     '</tr>';
        $("#tab").append(trHTML);
      }
      /* 删除行 */
      function deleteCurrentRow(obj) {
        //var table=document.getElementById("tab");//获取table对象
        var tr = obj.parentElement.parentElement;//获取obj所在行的对象
        var rowIndex = tr.rowIndex;//获取行号gt`1
        //table.deleteRow(rowIndex);//  DOM对象删除当前行
        $("#tab > tbody > tr:nth-child("+rowIndex+")").remove();//  jQuery对象删除当前行
      }
    </script>
  </body>
</html>
郎兴
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
10-18
今天小编就为大家分享一篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
原生JS+layui项目笔记（二）【table表格数据添加、删除】
sinat_38011533的博客
08-10 1072
项目需求：两个表格，表格一为已映射数据列表，表格二为未映射数据列表；两个表格相加为全部数据。表格一可以删除，表格二可以选中单条或多条添加进表格一。 两个表格嵌入弹出框，使用弹出框与form表单，使用弹出框的“确定”按钮作为表格二批量导入的确认键。 <script id="wd_data_box" type="text/html"> <div class="layui-form wd_box" lay-filter="filter_wd_data_form">
实现layui数据表单添加行功能（最新解决办法）
BUG
04-26 3183
这个解决方案分两种情况 1.如果你的table中并没有url，那么这个很好解决，先获取到目前table中的数据，然后添加一行，在重新加载一下就可以了 var dataBak = []; //定义一个空数组,用来存储之前编辑过的数据已经存放新数据 var tableBak = table.cache.stock_add_table; //获取之前编辑过的全部数据，前提是编辑数据是要更新缓存，stock_add_table 为表格的id for (var i = 0; i < tableBak.
layui批量添加选中表格table的数据
jduksa的博客
01-28 1316
//批量添加 html界面 @{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-eq...
layui table 动态增加行
热门推荐
qq_26462567的博客
01-02 2万+
目前layui的动态数据表格功能已经是否强大了，但是目前还没有动态增加行的功能，这里自己写了一个对象来实现动态增加行。   上代码  AddRow = (function(){ var addRowArray = []; var addRowIndex = 0; var $ = layui.$; var addRowClass = "add-row"; /** * 新...
JavaScript实现动态添加，删除行的方法实例详解
10-24
主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp <table id=viewTabs> 产品名称 编号 ...
js实现对table动态添加、删除和更新的方法
10-24
主要介绍了js实现对table动态添加、删除和更新的方法,涉及javascript针对html中table表格节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
HTML TABLE批量添加行与删除行
03-06
HTML TABLE批量添加行与删除行.javascript实现。
layui 表格组件中实现动态增加数据行的一种方式
lanfeng330的专栏
12-19 1万+
        layui 以界面简洁美观而吸引了不少开发人员，在使用table组件时，需要能编辑表格内容，动态增加数据行。编辑功能组件已支持。但动态增加数据行好像没有支持，网上提供的方式是，获得组件的数据集再加入一个空记录或默认记录，以这个新的数据集作为表格组件的数据源重新渲染表格。         方法是行得通，但毕竟不是原生支持，有局限。因为我用表格组件是来实现在线设计数据库表的，需要动态...
前端学习之路（1）———表格的增行和减行
weixin_43237435的博客
09-19 861
作为一个前端小白，刚刚开始起步，把自己在学习之路上的一些心得和体会记录下来，以便自己的成长。 ————————————分割线———————————————— 话归正题，今天的主要内容是在自己学习路上遇到的一个表格增行和减行的方法，自己也查阅了很多资料，最终实现了如下的效果： 这是表格初始化的样式： 当我点击了一次左上角的加号后（加号设置了click的事件）会在输入行后增加一行，效果如下： 同理...
el-table增加一行或者减少一行
weixin_40030173的博客
11-17 4899
<template> <div> <el-table :data="Arr1" border tooltip-effect="dark" style="width: 90%;margin-bottom: 20px;"> <el-table-column label="阶梯" align="center"> <template slot-scope="scope"> 第{{scope.row.groupLevel}}层.
JS example：点击按钮table增加一行，删除一行
生活需要用心
03-23 676
      点击添加按钮给table增加一行，有两种方法，一种是通过js控制添加；另一种就是直接用html元素和innerHTML，在这里我主要是说的用js来控制，因为这种易于调整。在这里要了解的这几个知识点, appendChild, firstChild, cloneNode(false or true), chidNodes,  childNodes[i], style = "display...
iview table增加一行减少一行_iView学习笔记(二)：Table行编辑操作
weixin_39843215的博客
12-22 675
1.前端准备工作首先新建一个项目，然后引入iView插件，配置好routernpm安装iViewnpm install iview --savecnpm install iview --savesrc/main.js文件内容import Vue from 'vue'import App from './App.vue'import router from './router'import iVie...
js操作table行
Roriring的博客
03-08 1万+
需求：例如在有些项目中我们需要对table中的行进行动态添加和删除，因为table中的记录数不确定。 点击“+”可以添加一行，点击“删除”可以删除当前行，可以在每一行中添加onclick方法deleteEnumItem进行调用 function deleteEnumItem() { var tab2=document.getElementById("enumTable");//获...
el-table实现表格动态新增/插入/删除 表格行，可编辑单元格
最新发布
weixin_42178050的博客
07-28 4207
el-table实现表格动态新增/插入/删除 表格行，可编辑单元格
利用jquery给指定的table进行添加一行，删除一行的操作
hyq_07_27的博客
09-29 2221
页面如图：点击 + ，增加一行数据，点击- 删除一行数据。 <table id="protypeTable" style="table-layout:fixed" class="tab-1 tab-2" cellspacing="0" cellpadding="0"> <tbody> <tr> <th style="width: 20%;">科目代码</th> <th .
html table批量添加行与删除行,js实现对table的增加行和删除行的操作方法
05-12
要实现对 HTML 表格的增加行和删除行，可以使用 JavaScript。以下是实现的方法： 1. 添加行： 首先，获取到要添加行的表格对象（如 `var table = document.getElementById('myTable');`）。 然后，创建一个新的行对象（如 `var row = table.insertRow();`）。 接下来，为新行对象添加单元格（如 `var cell1 = row.insertCell();`）。 最后，设置单元格的值（如 `cell1.innerHTML = "新单元格";`）。 完整示例代码如下： ```javascript // 获取表格对象 var table = document.getElementById('myTable'); // 创建新行对象 var row = table.insertRow(); // 添加单元格 var cell1 = row.insertCell(); // 设置单元格的值 cell1.innerHTML = "新单元格"; ``` 2. 删除行： 首先，获取到要删除行的表格对象（如 `var table = document.getElementById('myTable');`）。 然后，获取要删除的行对象（如 `var row = table.rows[index];`）。 接下来，调用表格对象的 `deleteRow()` 方法，传入要删除的行的索引（如 `table.deleteRow(index);`）。 完整示例代码如下： ```javascript // 获取表格对象 var table = document.getElementById('myTable'); // 获取要删除的行对象 var row = table.rows[index]; // 删除行 table.deleteRow(index); ``` 以上就是对 HTML 表格进行增加行和删除行的操作方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值