jQuery实现表格最后增加一行和删除最后一行

news2024/11/20 6:34:21

HTML代码

<div>
        <table>
            <thead>
                <tr>
                    <th>成绩表</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>科目</td>
                    <td>成绩</td>
                </tr>
                <tr>
                    <td>语文</td>
                    <td>80</td>
                </tr>
            </tbody>
        </table>
        <br>
        科目:<input type="text" id="subject">
        <br>
        成绩:<input type="text" id="score">
        <br>
        <br>
        <button id="add">添加</button>
        <button id="del">删除</button>
</div>

 js代码

<script src="../js/jquery-3.4.1.js"></script>
<script>
            $(function(){
                // 获取添加按钮并添加点击事件
                $('#add').on('click',function(){
                    // 获取input输入框的输入内容
                    let subject = $('#subject').val();
                    let score = $('#score').val();
                    // 将输入的内容添加到表格中
                    $('tbody').append(`<tr><td>${subject}</td><td>${score}</td></tr>`);
                    // 将input输入框中的内容清除
                    $('#subject').val('');
                    $('#score').val('');
                })
                // 获取删除按钮并添加点击事件
                $('#del').on('click',function(){
                    // 获取到tbody元素中的最后一行并进行删除操作
                    $('tbody tr:last').remove();
                })
            })
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/955391.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

unittest框架的使用

先简单介绍一下unittest的核心组成部分&#xff1a; 测试夹具&#xff1a;Test Fixture 一般用于执行测试用例的准备或者清理工作&#xff0c;比如测试开始前的数据准备或者测试结束的数据清理等。通过setUp()、tearDown()、setUpClass()、tearDownClass()这四个钩子函数实现了…

YOLOv5目标检测模型训练超参数总结记录

整个YOLO系列的模型除了v1和v2比较古老没有实际项目应用过以外&#xff0c;从v3-v8或多或少都有实践&#xff0c;其中以v5使用频度最高&#xff0c;最早期刚接触YOLO的时候也是一通原理详解学习各种结构可视化&#xff0c;后面实际项目开发越来越多&#xff0c;对于前面的记忆就…

一、Mycat2介绍与下载安装

第一章 入门概述 1.1 是什么 Mycat 是数据库中间件。 1、数据库中间件 中间件&#xff1a;是一类连接软件组件和应用的计算机软件&#xff0c;以便于软件各部件之间的沟 通。 例子&#xff1a;Tomcat&#xff0c;web中间件。 数据库中间件&#xff1a;连接java应用程序和数据库…

解压后的文件丢失怎么恢复?解压文件丢失4种恢复方法

您是否出现过解压文件丢失的情况呢&#xff1f;解压文件通俗易懂地讲就是把压缩好了的文件解开。而有些小伙伴在解压文件以后发现丢失了&#xff0c;这些丢失的文件或许是您重要的img解压文件/rar文件解压/zip解压文件&#xff0c;为了正确解决解压文件丢失问题&#xff0c;下面…

在Visual Studio 2017上配置并使用OpenGL

1 在Visual Studio 2017上配置并使用OpenGL 在GLUT - The OpenGL Utility Toolkit&#xff1a;GLUT - The OpenGL Utility Toolkit中点击“GLUT for Microsoft Windows 95 & NT users”&#xff0c;选择“If you want just the GLUT header file, the .LIB, and .DLL file…

Win7系统电脑开机总出现硬盘自检的简单解决方法

你是不是经常会遇到电脑开机进行硬盘自检&#xff0c;而且每次开机都检查很久不能跳过&#xff1b;怎么才能跳过这一步骤呢&#xff1f;下面教大家如何让Win7系统电脑在开机的时候跳过硬盘自检这一步骤&#xff0c;加快开机时间。 解决步骤&#xff1a; 1、按下“Win R”快捷键…

冠达管理:美联储或已达加息终点,但反弹面临诸多不确定性

本周以来&#xff0c;多项数据显现美国经济正在降温&#xff0c;联邦基金利率期货显现&#xff0c;美联储本轮加息周期或已结束。 于美股而言&#xff0c;正处于高位的货币基金是未来继续上涨的潜在动力。不过&#xff0c;与此前反弹行情的推进力比较&#xff0c;当时的不确定…

SAP:IDCNGRIR_GNB报表展示物料描述与采购订单不一致

1、问题描述&#xff1a; 目前在项目中发现执行SAP的IDCNGRIR_GNB报表的时候&#xff0c;出现了物料编码和订单的物料编码不一致的情况&#xff1a; 2、问题展示&#xff1a; 采购订单上物料及编码显示 IDCNGRIR_GNB报表执行结果显示 3、问题原因&#xff1a; 调试程序发现…

2023年信息安全管理与评估赛项参考答案-模块1任务一

根据网络拓扑图所示&#xff0c;按照IP 地址规划表&#xff0c;对防火墙的名称、各接口IP 地址进行配置。共8 分&#xff0c;每错1 处&#xff08;行&#xff09;扣1 分&#xff0c;扣完为止。地址、安全域、接口&#xff08;状态为UP&#xff09;、名称都正确。 2.根据网络拓扑…

一文读懂融资融券交易技巧!在上海开融资融券账户交易利率一般是多少?

融资融券交易技巧包括以下几点&#xff1a; 熟悉股票市场&#xff1a;了解市场走势、公司基本面等信息&#xff0c;根据趋势选择合适的股票进行交易。 做好风险管理&#xff1a;对买卖的风险进行合理评估&#xff0c;设定止损价位&#xff0c;防止损失过大。 控制杠杆比例&am…

java代码设计方案

一、代码重复问题处理 1、利用工厂模式 模板方法模式&#xff0c;消除 if…else 和重复代码 场景&#xff1a; 假设要开发一个购物车下单的功能&#xff0c;针对不同用户进行不同处理&#xff1a; 普通用户需要收取运费&#xff0c;运费是商品价格的 10%&#xff0c;无商品折…

three.js渲染带动画的glb文件

1. 准备工作 将下列文件在three.js的包中找到&#xff0c;注意的是我这里使用的是模块化版本的&#xff0c;这里不知道模块化的&#xff0c;可以先去看一下es6的模块化。 控制器&#xff1a; OrbitControls.js 加载器&#xff1a;GLTFLoader.js 材质&#xff1a; RoomEnvironm…

学习JAVA打卡第四十八天

Math类 在编写程序时可能需要计算一个数的平方根、绝对值或获取一个随机数等。 Math类的常用方法 BigInteger类 程序如果需要处理特别大的整数就可以用Java.math包中的BigInteger类的对象。 可以构造public BigInteger&#xff08;string val&#xff09;构造一个十进制的B…

Flink+Paimon多流拼接性能优化实战

目录 &#xff08;零&#xff09;本文简介 &#xff08;一&#xff09;背景 &#xff08;二&#xff09;探索梳理过程 &#xff08;三&#xff09;源码改造 &#xff08;四&#xff09;修改效果 1、JOB状态 2、Level5的dataFile总大小 3、数据延迟 &#xff08;五&…

【zookeeper】zookeeper介绍

分布式协调技术 在学习ZooKeeper之前需要先了解一种技术——分布式协调技术。那么什么是分布式协调技术&#xff1f;其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同步控制&#xff0c;让他们有序的去访问某种临界资源&#xff0c;防止造成"脏数据"的…

Joint contrast enhancement and exposure fusion for real-world image dehazing、近红外去雾、(近)红外和可见光数据集

今天给大家分享一篇发表在IEEE TMM上的去雾文章Joint Contrast Enhancement and Exposure Fusion for Real-World Image Dehazing 作者从对比度增强和曝光融合的视角来解决图像去雾问题&#xff0c;在真实场景上取得了较好的去雾效果。此外&#xff0c;作者将所提出的方法应用…

mqtt集群搭建并使用nginx做负载均衡_亲测得结论

mqtt集群搭建 RabbitMQ集群搭建和测试总结_亲测 搭建好RabbitMQ集群,并开启mqtt插件功能,mqtt集群也就搭建好了 nginx配置mqtt负载均衡 #修改rabbitmq1节点ip为1.19的nginx配置 vim /etc/nginx/nginx.confhttp { } #在http外添加如下配置 stream {upstream rabbitmqtt {ser…

OpenCV(十二):图像透视变换

目录 1.透视变换介绍 2.计算透视变换矩阵getPerspectiveTransform(&#xff09; 3.透视变换函数warpPerspective() 4.demo 1.透视变换介绍 透视变换是一种将原始图像映射到目标图像平面上的投影变换&#xff0c;又称为四点变换。 透视变换矩阵的一般形式如下所示&#xff…

城市内涝积水监测预警系统 yolov8

城市内涝积水监测预警系统通过yolov8网络深度学习框架&#xff0c;算法一旦识别到道路出现积水&#xff0c;城市内涝积水监测预警系统会立即发出预警信号。并及时通知相关人员。YOLO检测速度非常快。标准版本的YOLO可以每秒处理 45 张图像&#xff1b;YOLO的极速版本每秒可以处…

具有 70V 总线故障保护功能的ISO1042BQDWVRQ1、ISO1042BQDWVQ1、ISO1042QDWVRQ1汽车类隔离式 CAN 收发器

一、目标应用 • 起动机/发电机 • 电池管理系统 (BMS) • 直流/直流转换器 • 车载充电器 (OBC) 和无线充电器 • 逆变器和电机控制 二、器件规格 1、ISO1042BQDWVRQ1 完全版 收发器&#xff0c;隔离式 1/1 CANbus 8-SOIC 类型&#xff1a;收发器&#xff0c;隔离式 协议&a…