jQuery-表中数据的添加与删除

于 2023-05-29 09:49:05 发布
阅读量936 收藏 3
点赞数
分类专栏： jQuery 练习题 文章标签： html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heliuerya/article/details/130921995
版权

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表中数据的添加与删除</title>
    <link rel="stylesheet" type="text/css" href="styleB/css.css" />
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            //删除用户的方法
            function delA(){
                //获取要删除员工的名字
                //$(this)表示鼠标单击的元素
                //.parents()表示返回父元素
                //find()返回后代元素
                //"td:eq(0)"表示第一个td元素
                //text()获取指定元素的文本内容
                const name = $(this).parents("tr").find("td:eq(0)").text();
                //弹出一个确认框
                //confirm()在弹窗中用户点击确定按钮返回true，用户点击取消按钮返回false
                const flag = confirm("确认删除--->" + name + "<---的信息吗？");
                if(flag){
                    //删除当前a所在的tr
                    //用户点击的按钮所在的一行信息被删除
                    $(this).parents("tr").remove();
                }
                //取消默认行为
                return false;
            }

            //删除用户，下面两行代码的意义一样，都是给a标签绑定鼠标点击事件然后执行delA函数
            //$("a").click(delA);
            $("a").live("click" , delA);

            //添加员工
            $("#addEmpButton").click(function(){
                //获取用户填写的内容
                const name = $("#empName").val();
                const email = $("#email").val();
                const salary = $("#salary").val();

                //创建tr
                /*
                    <tr>
                        <td>Tom</td>
                        <td>tom@tom.com</td>
                        <td>5000</td>
                        <td><a href="#">Delete</a></td>
                    </tr>
                */
                //append()  比如：x.append(y) 在x元素中添加y元素
                //appendTo() 比如：a.appendTo(b)   把 a 插入到 b 子元素末尾，成为最后一个子元素
                $("<tr></tr>").append("<td>"+name+"</td>")
                              .append("<td>"+email+"</td>")
                              .append("<td>"+salary+"</td>")
                              .append("<td><a href='#'>Delete</a></td>")
                              .appendTo("#employeeTable"); //将元素添加到id=employeeTable元素中
            });
        });
    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>薪资</th>
            <th>删除</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>zhangsan@163.com</td>
            <td>5000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>lisi@sohu.com</td>
            <td>8000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>wangwu@126.com</td>
            <td>10000</td>
            <td><a href="#">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">姓名: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">邮箱: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">薪资: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        确认添加
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

添加数据信息

删除数据信息：

 

 

heliuerya
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
Jquery实现简单的表格添加、编辑、删除教程
shaily读书学习
05-22 2210
完整<span class="t_tag" onclick="function onclick(){function onclick(){tagshow(event)}}">代码： <!DOCTYPE <span class="t_tag" onclick="function onclick(){function onclick(){tagshow(even
jquery实现表格动态添加
yaohong
11-09 275
//点击追加触发$(function(){$("#button").click(function(){var div_ = $("#sel").val();var context = $("#context").val();append(div_,context);//$("#tab tr:not(:first)").remove();//$("#tab tbody").empty();...
jquery实现添加和删除行数据
qq_35349167的博客
09-27 526
首先创建html文件 将 jquery 文件引入 html中 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <style>
jQuery的表格的添加和删除
曜耀的博客
07-27 224
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
jQuery实现表单动态添加与删除数据操作示例
10-18
主要介绍了jQuery实现表单动态添加与删除数据操作,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
jquery动态添加删除一行数据示例
10-25
主要介绍了jquery如何动态添加删除一行数据,需要的朋友可以参考下
jQuery动态添加删除移动列表插件
06-10
这是一款实用的jQuery动态添加移动列表插件，jQuery动态添加数据代码，jQuery动态数据代码。
用jQuery实现表格的添加和删除
December_shi的博客
11-08 1344
用jQuery实现点击添加能够在表格下面添加一行选项，点击GET能够删除当前行。 CSS代码： <style type="text/css"> *{ margin: 0; padding: 0; } div{ margin: 0 auto; width: 300px; } table{ text-align: center; width: 300px; } #btn{ width: 100px
jquery动态添加表单数据
weixin_34007886的博客
02-19 940
动态添加用户 实现代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;!-- 引入jquery开发包 --&gt; &lt;script type="text/javascript" src="js/jquery-1.12.3.j
JQuery对表格行的添加删除
03-20
JQuery对表格行的添加删除,如添加一行，删除一行
表格添加删除行，依赖于jquery
03-22
NULL 博文链接：https://jaykuen.iteye.com/blog/1008189
Jquery 表格制作 编辑、删除 、添加功能
最新发布
清风且从容，何需念君安。
05-26 1051
【代码】Jquery 表格制作 编辑、删除 、添加功能。
jquery实现表格的添加和删除
LHH201016的博客
07-28 596
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title&...
Jquery——表格添加删除
Zjaun的博客
02-13 259
CSS样式 &amp;lt;style&amp;gt; * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px s...
jquery实现添加删除表格
qq_48294048的博客
10-04 1871
css: <style> div { width: 500px; line-height: 30px; font-size: 18px; margin: 20px auto; border: 1px solid #000; padding: 20px; box-sizing: border-box;
jQuery实现网页表的添加和删除功能
陈常杰的博客
11-07 479
功能介绍 使用jQuery实现添加和删除记录的功能； 功能实现 添加功能：在实现添加功能我们要找到添加的位置，也就是HTML语句添加的位置。很显然我们的HTML语句是要添加到表格中去，从而形成新的一行，再添加这个记录的同时我们还要注意一个细节，就是要把这个记录的删除功能也要加上。当时这个问题我想了想实现这个删除功能肯定是要在标签中进行实现，那么接下来就是要找到添加语句的a标签，这个我们可以借助添加语句用到的jQuery对象来实现，具体都在代码里面了；接下来就是删除功能的添加，在页面加载完成我们就给当前记录绑
jquery中表格的增加和删除行
热门推荐
yanleigis的专栏
02-10 1万+
$("document").ready(function(){ //第六个表格的删除按钮事件绑定 $("#tbody6 .del").click(function() { $(this).parents(".repeat").remove(); }); //第六个表格的添加按钮事件绑定 $("#add6").c
JQuery表格的新增与删除，隔行换色以及复选框全部勾选
stray_0212的博客
12-10 201
HTML部分 表格，以及新增的表单 <!--点击新增按钮--> <div><input type="button" value="新增分类"/></div> <!--表格--> <table> <thead> <tr> <th><input type="checkbox"/></th> <th>编号</th&g
jquery实现表格内点击按钮删除该行数据
05-24
可以通过以下步骤实现： 1. 给表格中的每一行添加一个删除按钮，可以使用HTML代码实现： ```html <tr> <td>数据1</td> <td>数据2</td> <td><button class="delete-btn">删除</button></td> </tr> ``` 2. 使用jQuery绑定按钮的点击事件，获取该行的索引，并从表格中删除该行： ```javascript $(document).on("click", ".delete-btn", function() { // 获取当前行 var $row = $(this).closest("tr"); // 获取当前行的索引 var index = $row.index(); // 从表格中删除该行 $row.remove(); }); ``` 这样，当用户点击某一行的删除按钮时，该行将被从表格中删除。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值