动态表格的添加和删除

最新推荐文章于 2023-03-14 15:11:47 发布
最新推荐文章于 2023-03-14 15:11:47 发布
阅读量347 收藏
点赞数 1
文章标签： JavaScript动态表格添加和删除（优化写法）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43113232/article/details/82717059
版权

动态表格的添加和删除（优化简单写法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加"  onclick="addtr()">

</div>


<table id="tab">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>葫芦娃</td>
        <td>男</td>
        <td><a href="javascript:void (0)" onclick="deltr(this)">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>爷爷</td>
        <td>男</td>
        <td><a href="javascript:void (0)" onclick="deltr(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>妖精</td>
        <td>?</td>
        <td><a href="javascript:void (0);" onclick="deltr(this)">删除</a></td>
    </tr>
</table>
<script>

//添加一行的方法

    function addtr() {
        var tab = document.getElementById("tab");
        var vid = document.getElementById("id").value;
        var vname = document.getElementById("name").value;
        var vgender = document.getElementById("gender").value;

    //获取table
    //var tab = document.getElementsByTagName("table")[0];
    tab.innerHTML +="<tr>\n" +
        "        <td>"+vid+"</td>\n" +
        "        <td>"+vname+"</td>\n" +
        "        <td>"+vgender+"</td>\n" +
    "        <td><a href=\"javascript:void (0)\" onclick='deltr(this)'>删除</a></td>\n" +
    "    </tr>"
}

//删除一行的方法

function deltr(obj) {
    //第一个爹是td,爷爷是tr，太爷是table
    var tab = obj.parentNode.parentNode.parentNode;
    //删除
    tab.removeChild(obj.parentNode.parentNode);
}
</script>

</body>
</html>
小帅子Lv
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JQuery动态添加和删除表格行的方法
10-24
主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
SQL Server 2005 中的分区表和索引
Neo in SAP
05-08 880
摘要：SQL Server 2005 中基于表的分区功能为简化分区表的创建和维护过程提供了灵活性和更好的性能。追溯从逻辑分区表和手动分区表的功能到最新分区功能的发展历程，探索为什么、何时以及如何使用 SQL Server 2005 设计、实现和维护分区表。（本文包含一些指向英文站点的链接。）关于本文本文所描绘的功能和计划是下一版本 SQL Server 的开发方向。它们并非本产品的说明书，如有
第四章：OceanBase集群技术架构
明确的爱，真诚的喜欢，直接的厌恶，站在太阳底下的坦荡，被坚定的选择。
03-14 1897
通过为不同的租户配置不同的Primary Zone，可以将业务流量集中到若干Zone中，减少跨Zone及跨服务器 的操作。如无特殊指定，自动继承上级对象的primary_zone：database继承租户的primary_zone设置， table继承database的primary_zone设置。• 如果多个表的分区方式完全相同（分区类型、分区键个数、分区数量等） ，可以 在逻辑上将这些表归属到同一个Table Group中，以影响动态负载均衡的策略。提供更加 灵活的负载均衡策略。
JavaScript Dom 案例-动态表格的添加和删除
Ass12454548的博客
01-24 1081
JavaScript Dom 案例-动态表格的添加和删除
Excel创建动态表
qq30211478的博客
03-31 1194
一、创建动态表的方法： 方法一：在菜单栏选择插入-表格，选中要创建动态表的区域即可； 方法二：按住Ctrl+T，勾选表包含标题，选中要创建动态表的区域即可； 二、动态表其他功能设置 1、序号列可以使用row（）函数自动添加更新序号； 2、如果要取消动态表，在菜单栏设计-转换为区域，此时，表中可能还有一些格式，要清除格式，可以在菜单栏开始-清除-清除格式即可； 3、如果要调整动态表的大小...
动态生成表格以及删除表格
HX7_L的博客
08-07 212
动态生成表格以及删除表格
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
jQuery实现的简单动态添加、删除表格功能示例
10-19
主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下
基于JavaScript实现动态添加删除表格的行
10-22
用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，...
创建动态表格以及删除
xiaoshitou_s的博客
09-27 183
** 全选/全不选 编号 姓名 操作 s001 王五 <input type="button" value="反选" id="noall"> <form> 编号<input type="text" id="uid"><br> 姓名<input type="text" id="uname"><br> <input type="button" value="添加" id="addbtn"
TableLayout，实现动态添加和删除行，并实现统计表格中的数据
03-20
TableLayout，实现动态添加和删除行，判断行中的数据是否含有空值，可以手动地输入数据，也可以选择数据添加在表格中，并实现统计表格中的数据。
动态添加/删除表格行并提交内容到后台
07-19
动态添加/删除表格行并实现前后台的互动，用最基础的c#和js知识实现，可以作为新手参考。
HTML动态增加和删除表格的行和列
热门推荐
huzijia888的博客
12-03 4万+
起始状态 增加行 增加列 删除行 删除列 function addrow(){   var c=document.getElementById('mytable');//获得表格的信息   if( c.rows.length==0){//如果是向一个空表增加一行  var x=c.insertRow(0);//
js动态实现表格添加和删除操作
Distance的博客
11-05 5248
运行效果如图（两种实现方案，被注释的是第一种实现方案） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ te...
js实现动态删除表格的行或者列-------Day57
麦田里
07-04 7667
让静态页面动起来，这句话有没有毛病啊....
【前端练习】动态增加和删除表格
weixin_45500506的博客
08-13 2052
  最近完成前端练习，需要实现通过JS对table进行动态的变化（行列的增删），练习中有一些比较好的编程思想和技巧，在此总结出来。 相关的基本结构（HTML）如下: <body> <div> <div><!--这里是输入数据的地方--> <label for="rowInput">行：</label><input type="text" id = "rowInput" name="rowInputText
动态添加、删除table表格行和列
hao9101111的博客
12-22 2251
正常情况下要动态添加、删除表格的行和列，如果要牵扯到数据绑定等问题的话 会很复杂，但是我们可以把这个比较复杂的问题进行拆分，动态添加删除行和列，无非难点在于 怎么添加列 以及如何添加行，对于添加列逻辑可能稍显复杂 ，但是添加行倒是很简单，只需要往定义的 list里面push空的数据即可实现新增一条数据，那么如果添加列，其实我们可以仿照这个， 换个思路， 整体添加列要考虑 表头的设置 以及数据添加 数据绑定这些，但是我们可以把这些给分开，我们先添加表头 定义一个表格list 里面包含要添加表头的 n...
js动态表格有删除和添加功能
最新发布
06-01
当然可以，在 JavaScript 中，你可以使用以下代码来实现向表格中添加和删除行的功能： ...<!-- 在页面中创建一个空的表格 --> <table id="myTable"></table> ...希望这可以帮助你实现动态添加和删除表格行的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值