点击循环中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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值