<!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. ​CentOS防火墙操作命令 ​

    CentOS防火墙操作命令 1.查看防火墙服务状态 systemctl status firewalld.service 或者查看防火墙的状态: 1 firewall-cmd --state 2.开启 ...

  2. 记一次 .NET某炉膛锅炉检测系统 崩溃分析

    一:背景 1. 讲故事 上个月有个朋友在微信上找到我,说他们的软件在客户那边隔几天就要崩溃一次,一直都没有找到原因,让我帮忙看下怎么回事,确实工控类的软件环境复杂难搞,朋友手上有一个崩溃的dump,刚 ...

  3. Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router ...

  4. Go命令行工具cobra

    关于 Cobra 是 Go 的 CLI 框架.它包含一个用于创建功能强大的现代 CLI 应用程序的库,以及一个用于快速生成基于 Cobra 的应用程序和命令文件的工具. Cobra 由 Go 项目成员 ...

  5. 【笔记】问题控制与管理&故障、问题、已知错误、变更请求之间的逻辑关系&问题管理流程

    [笔记]问题控制与管理&故障.问题.已知错误.变更请求之间的逻辑关系 问题控制与管理 与故障管理的尽可能快地恢复服多的目标不同,问题管理是要防止再次发生故障 例如你制作了一个报表,用户填写了问 ...

  6. 4.CSS层次选择器

    1.后代选择器:在某个元素的后面 1 /*后代选择器*/ 2 body p{ 3 background: crimson; 4 } 2.子选择器:仅一代 1 /*子选择器*/ 2 body>p{ ...

  7. 力扣50(java)-Pow(x,n)（中等）

    题目: 实现 pow(x, n) ,即计算 x 的整数 n 次幂函数(即xn ). 示例 1: 输入:x = 2.00000, n = 10输出:1024.00000示例 2: 输入:x = 2.10 ...

  8. 第 2章Python 爬虫基本库的使用

    第 2章Python 爬虫基本库的使用 爬虫并没有你想象中的复杂,很多初学者一开始就担忧,比如怎么写代码去构造请求,怎么把请求发出去,怎么接收服务器的响应,需不需要学习 TCP/IP 四层模型的每一层 ...

  9. 阿里云日志服务SLS携手观测云发布可观测性解决方案，共建可观测应用创新

    简介: 2022年云栖大会期间,阿里云同观测云共同发布可观测性联合解决方案.观测云通过集成日志服务SLS的产品能力,发布了观测云SAAS专属版. 2022年云栖大会期间,阿里云同观测云共同发布可观测性 ...

  10. 云原生数据仓库AnalyticDB支撑双11，大幅提升分析实时性和用户体验

    ​简介:2021年双十一刚刚落幕,已连续多年稳定支持双十一大促的云原生数据仓库AnalyticDB,今年双十一期间仍然一如既往的稳定.除了稳定顺滑的基本盘之外,AnalyticDB还有什么亮点呢?下面 ...