AJAX jquery 多按鈕處理問題

jquery ajax button

klz 2021-09-27 12:55:08 ‧ 1928 瀏覽

分享至

在一個刪除功能上想用上ajax做處理,
但一份報表中有多個資料不知如何寫以上情況
如button id加上(eg: deletedBtn1, deletedBtn2 ....)
假如有100行資料, 在 script上loop 100行
這樣好像有的不正確,

想請教這情況可以如果做處理

<button  id="deletedBtn" value='.$value['id']>刪除</button>
<button  id="deletedBtn" value='.$value['id']>刪除</button>
<button  id="deletedBtn" value='.$value['id']>刪除</button>
.
.
.

    <script>

        $("#deleteBtn").click(function() {
            $.ajax({
                url: 'table_del.php',
                type: "POST",
                dataType: "html",
                data: {
                    id: $('#deletedBtn').val()
                },

                error: function() {
                    alert('Ajax request 發生錯誤');
                },
                success: function(res) {
                    //alert('Ajax success!');
                    $('#list').html(res);
                }
            })
        })
    </script>

看更多先前的討論...收起先前的討論...

archer9080 iT邦研究生 4 級 ‧ 2021-09-27 13:09:20 檢舉

首先id只能唯一
然後有個屬性叫class
或是直接onclick傳值處理

klz iT邦新手 5 級 ‧ 2021-09-27 13:27:19 檢舉

onclick 都可決定我的問題謝謝了

klz iT邦新手 5 級 ‧ 2021-09-27 13:31:02 檢舉

想再問一下是否只有用 onclick才可解決我這問題?

klz iT邦新手 5 級 ‧ 2021-09-27 13:47:11 檢舉

有人回黎了謝謝了你提供的方法也可行

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

Hankz

iT邦新手 2 級 ‧ 2021-09-27 13:24:40

最佳解答

selector很好用的

<button  class="deletedBtn" value='.$value['id']>刪除</button>
<button  class="deletedBtn" value='.$value['id']>刪除</button>
<button  class="deletedBtn" value='.$value['id']>刪除</button>
<script>

    $(".deleteBtn").click(function() {
        let value = $(this).val();
        $.ajax({
            url: 'table_del.php',
            type: "POST",
            dataType: "html",
            data: {
                id: value
            },

            error: function() {
                alert('Ajax request 發生錯誤');
            },
            success: function(res) {
                //alert('Ajax success!');
                $('#list').html(res);
            }
        })
    })
</script>