点击循环中td里面的button,获取button属性不同的值,并发送Ajax做删除操作

假设你想在循环中的每个<td>中的按钮被点击时获取不同属性的值,你可以使用以下方法。

首先,确保每个按钮有不同的自定义属性,比如data-iddata-name等。然后,在点击事件处理函数中使用$(this)来获取当前被点击的按钮,再使用.attr()方法来获取相应的自定义属性的值。

下面是一个示例代码:

<table>
  <tr>
    <td><button class="btn-delete" data-id="1" data-name="A">按钮1</button></td>
    <td><button class="btn-delete" data-id="2" data-name="B">按钮2</button></td>
    <td><button class="btn-delete" data-id="3" data-name="C">按钮3</button></td>
    <!-- 更多的表格行 -->
  </tr>
</table>

<script>
$(document).ready(function() {
  $('.btn-delete').click(function() {
    var id = $(this).attr('data-id'); // 获取自定义属性data-id的值
    var name = $(this).attr('data-name'); // 获取自定义属性data-name的值
    console.log('按钮的自定义属性data-id的值为:' + id);
    console.log('按钮的自定义属性data-name的值为:' + name);
    // 在这里可以使用id和name执行接下来的操作
  });
});
</script>

在这个示例中,当任意一个按钮被点击时,会执行点击事件处理函数。在函数中,使用$(this)来获取当前被点击的按钮,然后使用.attr('data-id').attr('data-name')来分别获取data-iddata-name的值,并将它们存储在变量idname中。然后你可以使用这些值执行接下来的操作,比如发送Ajax请求或者进行其他处理。

//跟进删除
                $('.delBtn').on("click",function (){
                    var ids = $(this).attr('date-val');
                    // console.log(ids);
                    layer.confirm('确定要删除这条记录吗?', {
                        title:'删除',
                        btn: ['确定', '取消']
                    }, function(){
                        // 点击确定按钮的回调函数
                        layer.closeAll('dialog'); // 关闭确认对话框
                        // 发送 Ajax 请求执行删除操作
                        $.ajax({
                            type: 'POST',
                            url: 'platform/house/follow/del', // 替换成实际的删除接口地址
                            data: {ids: ids}, // 传递要删除的记录ID
                            success: function(response) {
                                // 删除成功的处理逻辑
                                location.reload();
                                // console.log('删除成功');
                            },
                            error: function() {
                                // 删除失败的处理逻辑
                                // console.log('删除失败');
                            }
                        });
                    }, function(){
                        // 点击取消按钮的回调函数
                        layer.closeAll('dialog'); // 关闭确认对话框
                        // console.log("取消删除操作");
                    });

                });
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用jQuery和Ajax实现点击列表查看操作可以看到详细信息的示例代码: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人员信息列表</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>人员信息列表</h1> <table id="person-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>身高(cm)</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div id="detail-modal" style="display: none;"> <h2 id="detail-name"></h2> <p>年龄:<span id="detail-age"></span></p> <p>身高:<span id="detail-height"></span>cm</p> </div> <script> $(document).ready(function() { $.ajax({ url: 'person.json', // 人员信息JSON文件的URL dataType: 'json', success: function(data) { var tableRows = ''; $.each(data, function(key, value) { tableRows += '<tr><td>' + value.name + '</td><td>' + value.age + '</td><td>' + value.height + '</td><td><button class="detail-btn" data-name="' + value.name + '" data-age="' + value.age + '" data-height="' + value.height + '">查看</button></td></tr>'; }); $('#person-table tbody').append(tableRows); // 点击查看按钮显示详细信息 $('.detail-btn').click(function() { var name = $(this).data('name'); var age = $(this).data('age'); var height = $(this).data('height'); $('#detail-name').text(name); $('#detail-age').text(age); $('#detail-height').text(height); $('#detail-modal').show(); }); // 点击模态框外部或关闭按钮隐藏模态框 $('#detail-modal').click(function(event) { if (event.target == this || event.target.className == 'close-btn') { $(this).hide(); } }); }, error: function(jqXHR, textStatus, errorThrown) { console.log('Error: ' + textStatus + ' - ' + errorThrown); } }); }); </script> </body> </html> ``` 在这个示例,我们在表格添加了一个“操作”列,并在每行添加了一个查看按钮。当用户点击查看按钮时,我们使用按钮的`data-*`属性获取该行人员的详细信息,并将信息显示在一个模态框。我们还在模态框外部和关闭按钮上添加了事件处理程序,以便在用户点击模态框外部或关闭按钮时隐藏模态框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值