jquery实现表格的增删改查整体应用

最新推荐文章于 2023-05-29 09:49:05 发布
最新推荐文章于 2023-05-29 09:49:05 发布
阅读量269 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LHH201016/article/details/119859308
版权

<!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>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        table{
            width: 800px;
            border-collapse: collapse;
        
        }
        </style>
</head>
<body>
    <table>
        <tr>
            
            <td>姓名：<input id="realName" name="realName" type="text"></td>
            <td>年龄：<input id="age" name="age" type="text"></td>
            <td>地址：<input  id="address" name="address" type="text"></td>
            <td><input value="添加" type="button" οnclick="add()">
                <input value="批量删除" type="button" οnclick="delBatch()">
            </td>
        </tr>
    </table>
    <table border="1">
        <thead>
            <tr>
                <td><input id="checkall" type="checkbox" οnchange="checkAll(this)"></td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="mytb">
            <tr>
                <td><input type="checkbox"></td>
                <td>小明</td>
                <td>30</td>
                <td>郑州</td>
                <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
            </tr>
        </tbody>
        
    </table>

    <script>
        //添加
      function add() {
          //追加table表的数据
          var realName = $('#realName').val();
          var age = $('#age').val();
          var address = $('#address').val();
          //把创建的值存入下面的表格中
          var traa = $("<tr>"
            +"<td><input type=\"checkbox\"></td>"
            +"<td>"+realName+"</td>"
            +"<td>"+age+"</td>"
            +"<td>"+address+"</td>"
            +"<td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</td>"
            +"</tr>");
            $('#mytb').append(traa);
      }
      //删除
    function del(obj){
          $(obj).parent().parent().remove();
    }
     //全选
     $("#checkall").click(function() {
               $.each($('table tr td>input'), function(index, value) {
                   console.log($(this).val() )
                   $(this).prop('checked',true)
               })
        })
        //批量删除
        function delBatch(){
            $("tbody input:checked").parent().parent().remove(); 
        }
    </script>

</body>
</html>

LHH201016
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery对table表格进行增删改查
10-20
主要为大家详细介绍了jQuery对table表格进行增删改查操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Jquery 表格制作 编辑、删除 、添加功能
清风且从容，何需念君安。
05-26 1001
【代码】Jquery 表格制作 编辑、删除 、添加功能。
jQuery-表中数据的添加与删除
heliuerya的博客
05-29 920
/appendTo() 比如：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素。const flag = confirm("确认删除--->" + name + "<---的信息吗？//confirm()在弹窗中用户点击确定按钮返回true，用户点击取消按钮返回false。//append() 比如：x.append(y) 在x元素中添加y元素。//"td:eq(0)"表示第一个td元素。//text()获取指定元素的文本内容。//$(this)表示鼠标单击的元素。
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5755
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
jQuery实现表单的增删改查（完整版）
adminsir0的博客
09-01 2750
jQuery，js，增删改查，表单，数据，表格，本地存储，localstorage
jquery实现添加删除表格
qq_48294048的博客
10-04 1867
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表格添加删除记录
m0_51435825的博客
12-11 270
jQuery表格添加删除记录
Jquery实现表格的增加与删除案例
量子前端的博客
09-19 1583
这是一个通过浮动窗口添加课程信息（一条tr）的小功能，界面如图所示，点击添加数据会出现新窗口。 jquery中的事件全部都是click事件，分别是添加数据、添加课程、关闭添加课程窗口和GET按钮四个事件。 代码：~~~~~~~~~~~~~ <body> <button id = 'btn'>添加数据</button> <div id = 'dv1'> <table> <tr style = 'background-color
jQuery实现表格行的删除和增加(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-23 1177
jQuery实现表格行的删除和增加(1+X Web前端开发初级 例题)
使用jQuery完成表格的增删改查4个功能
qq_180494790的博客
10-27 1363
最终可以实现4个功能。
jquery表格增删改查.rar
05-05
借助bootstrap框架完成的一个简单的jquery表格增删改查内容，适合学习。借助bootstrap框架完成的一个简单的jquery表格增删改查内容，适合学习。
表格添加删除行，依赖于jquery
03-22
NULL 博文链接：https://jaykuen.iteye.com/blog/1008189
JQuery对表格行的添加删除
03-20
JQuery对表格行的添加删除,如添加一行，删除一行
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
DataTable+Jquery+Bootstrap实现表格增删改查
05-15
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
jQuery表格编辑添加删除行代码.zip
07-04
jQuery表格编辑添加删除行代码是一款适用于手机端的编辑表格代码。
JS/jQuery实现超简单的Table表格添加,删除行功能示例
10-16
主要介绍了JS/jQuery实现超简单的Table表格添加,删除行功能,结合实例形式详细分析了JS与jQuery针对Table表格添加,删除行功能的相关实现技巧,需要的朋友可以参考下
jquery实现表格增删改查
最新发布
05-31
好的，以下是一个简单的示例代码，用于实现表格增删改查的功能，使用 jQuery 和 AJAX 技术： HTML 代码： ``` <table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Actions</th> </tr> </thead> <tbody> <!-- 表格数据会动态生成 --> </tbody> </table> <form id="addForm"> <input type="text" name="name" placeholder="Name"> <input type="number" name="age" placeholder="Age"> <button type="submit">Add</button> </form> <form id="editForm"> <input type="hidden" name="id"> <input type="text" name="name" placeholder="Name"> <input type="number" name="age" placeholder="Age"> <button type="submit">Update</button> </form> ``` jQuery 代码： ``` // 显示所有数据 function showData() { $.ajax({ url: 'api.php', // 后端接口地址 type: 'GET', dataType: 'json', success: function(data) { var tbody = $('#myTable tbody'); tbody.empty(); // 先清空表格数据 $.each(data, function(index, item) { var tr = $('<tr>').appendTo(tbody); $('<td>').text(item.id).appendTo(tr); $('<td>').text(item.name).appendTo(tr); $('<td>').text(item.age).appendTo(tr); var td = $('<td>').appendTo(tr); $('<button>').text('Edit').on('click', function() { // 点击 Edit 按钮时，显示编辑表单 $('#editForm [name=id]').val(item.id); $('#editForm [name=name]').val(item.name); $('#editForm [name=age]').val(item.age); }).appendTo(td); $('<button>').text('Delete').on('click', function() { // 点击 Delete 按钮时，删除该行数据 $.ajax({ url: 'api.php?id=' + item.id, type: 'DELETE', success: function() { showData(); // 数据删除成功后，重新显示所有数据 } }); }).appendTo(td); }); } }); } // 添加数据 $('#addForm').on('submit', function(event) { event.preventDefault(); // 阻止表单提交 $.ajax({ url: 'api.php', type: 'POST', data: $(this).serialize(), success: function() { // 数据添加成功后，清空表单并重新显示所有数据 $('#addForm')[0].reset(); showData(); } }); }); // 更新数据 $('#editForm').on('submit', function(event) { event.preventDefault(); // 阻止表单提交 $.ajax({ url: 'api.php', type: 'PUT', data: $(this).serialize(), success: function() { // 数据更新成功后，清空表单并重新显示所有数据 $('#editForm')[0].reset(); showData(); } }); }); // 页面加载完成后，显示所有数据 $(document).ready(function() { showData(); }); ``` 以上代码中，我们使用了一个名为 `api.php` 的后端接口，用于处理增删改查的请求。你需要根据实际情况自行编写这个接口。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值