<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

    <title>test</title>

    <style>

    </style>

</head>

<body>

        <table class="my_table">

            <thead class="my_thead">

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody class="my_tbody" id="tb1">

                <tr id="1">

                    <td>001</td>

                    <td>张三</td>

                    <td>20</td>

                </tr>

                <tr>

                    <td>002</td>

                    <td>张三</td>

                    <td>20</td>

                </tr>

                <tr>

                    <td>003</td>

                    <td>张三</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

        <button id="btn">添加</button>

        <script>

                // 删除id==1的这一行：用remove()方法

                $("#1").remove();

                // 当点击 “添加” 按钮时，给id==tb1的tbody添加一行："<tr><td>004</td><td>张三</td><td>20</td></tr>"

                $("#btn").click(function(){

                    $("#tb1").append("<tr><td>004</td><td>张三</td><td>20</td></tr>");

                });

        </script>

</body>

</html>

jquery 给表格添加或删除一行的更多相关文章

  1. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

  2. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  3. jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> ...

  4. jQuery如何动态添加具有删除按钮的行

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  5. jQuery创建表格并实现删除

    利用jQuery创建一个简单的表格,并添加一个简单的删除按钮 <!DOCTYPE html> <html lang="en"> <head> & ...

  6. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  7. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  8. jquery 清空、添加、删除select

    $("#selectid").empty();//清空 $("#selectid").append("<option value='" ...

  9. jQuery的节点添加、删除、替换等操作

    //几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...

  10. jQuery——类的添加与删除

    添加类:addClass 删除类:removeClass 判断类是否存在:hasClass <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Python生成唯一ID----UUID

    # UUID 生成唯一ID # uuid 是Python内置模块,主要有五种算法. import uuid # uuid1() 基于时间戳 a1 = uuid.uuid1() print('uuid1 ...

  2. HDC 2022重磅首发《鸿蒙生态应用开发白皮书》，附全文

    原文:https://mp.weixin.qq.com/s/sEicsV_82770nAlcSCzwIw,点击链接查看更多技术内容.   11月4-6日,华为开发者大会2022(HDC)在东莞松山湖举 ...

  3. 使用Quorum Journal Manager(QJM)的HDFS NameNode高可用配置

    前面的一篇文章写到了hadoop hdfs 3.2集群的部署,其中是部署的单个namenode的hdfs集群,一旦其中namenode出现故障会导致整个hdfs存储不可用,如果是要求比较高的集群,有必 ...

  4. 学习C#编程经典书籍

    1.<C# 语言程序设计>(第4版):由微软公司的C#语言团队编写,是学习C#语言的必备经典著作. 2.<C#高级编程>(第9版):由Andrew Troelsen编写,涵盖了 ...

  5. react中<link>和<navlink>区别

    两者都是实现路由的跳转.但 点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载...使用to链接组件时,它的值既可是字符串,也可以是location对象(包含path ...

  6. 力扣175(MySQL)-组合两个表（简单）

    题目: 表: Person 表: Address 编写一个SQL查询来报告 Person 表中每个人的姓.名.城市和州.如果 personId 的地址不在 Address 表中,则报告为空  null ...

  7. 力扣8(java)-字符串转整数(atoi)（中等）

    题目: 请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAtoi(string s) 的算法 ...

  8. 牛客网-SQL专项训练6

    ①要将employee 的表名更改为 employee_info,下面MySQL语句正确的是(A) 解析: RENAME用于表的重命名:RENAME  <NAME>(修改表名或索引名) 或 ...

  9. HarmonyOS NEXT应用开发案例——全屏登录页面

    全屏登录页面 介绍 本例介绍各种应用登录页面. 全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他 ...

  10. OpenYurt v1.1.0: 新增 DaemonSet 的 OTA 和 Auto 升级策略

    简介: 在 OpenYurt v1.1.0 版本中,我们提供了 Auto 和 OTA 的升级策略.Auto 的升级策略重点解决由于节点 NotReady 而导致 DaemonSet升级阻塞的问题,OT ...