jQuery 數據表切換按鈕在更改時填充單元格

Question

我正在嘗試為當地俱樂部創建一個在線出勤登記表，記錄會員/非會員出勤率、他們必須支付的費用以及是否已支付，然后將其存儲在數據庫中以備將來檢索。

目前我正在使用 html/php 顯示 Subs

<td class="subs"><?php  

    if ($row['memb_stat'] == 'Member') {
        $subs = 3.50;
        setlocale(LC_MONETARY, 'en_GB.UTF-8');
        echo money_format('%.2n', $subs);

    }else{
        $subs = 5.00;
        setlocale(LC_MONETARY, 'en_GB.UTF-8');
        echo money_format('%.2n', $subs);
    }

?>

這只是一個臨時解決方案，顯然沒有考慮第一列的值。

我真正希望發生的是，當切換按鈕狀態更改時，相應的 Subs 列單元格填充了其會員身份的正確價格。

我意識到這可能最好使用 JavaScript 和 ajax 來完成，但我似乎無法讓具有固定值的基本細胞群工作。 這是我一直在嘗試的事情。

$(document).on('change', '.toggleBtn', function(ev){
    ev.preventDefault();

    $(this).bootstrapToggle('disable');

    var btn_button = $(this);
    var status = $(this).prop('checked');
    btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
    var tbl_id = $(this).attr("id");
    var tbl_status = $(this).data("status");
    if(tbl_status == 0) status = 1;
    else status = 0;

    //var valor = $(this).closest('tr').find('td:first').text();
        //$(this).attr('value', valor);

    //table.cell( $(this).closest('tr'), 7 ).data('3.50')
    table.cell( $(this).closest('tr'), 7 ).data("status");
    //setTimeout( function () {
        //table.draw();
    //}, 1000 );

    $.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
        console.log(data);
        if(status == "checked"){
            $('.warning-modal-message').html("Record status changed successfully.");
            $('#warningModal').modal('show');
            setTimeout(function(){  location.reload(); }, 2000);
        }
        else{
            $('.warning-modal-message').html("Data deletion failed.");
        }
    });
});

任何指導將不勝感激。

謝謝！

Answer 1

可能不是最優雅的解決方案，但它現在正在工作。

$(document).on('change', '.toggleBtn', function(ev){
ev.preventDefault();

$(this).bootstrapToggle('disable');

var subs = 3.50;

var btn_button = $(this);
var status = $(this).prop('checked');
btn_button.html(' <i class="fa fa fa-spinner fa-spin"></i> ');
var tbl_id = $(this).attr("id");

var currow = $(this).closest('tr');
var membstat = currow.find('td:eq(5)').text();

if(membstat == 'Member') status = 1;
else status = 0;

if(membstat == 'Member'){
    currow.find('td:eq(6)').html(subs);
}else{
    currow.find('td:eq(6)').html('5.00');
};

$.post('save_details.php', { form_name: "user_status", tbl_id: tbl_id, status: status }, function(data,status){
    if(status == "checked"){
        $('.warning-modal-message').html("Record status changed successfully.");
        $('#warningModal').modal('show');
        setTimeout(function(){  location.reload(); }, 2000);
    }
    else{
        $('.warning-modal-message').html("Data deletion failed.");
    }
});
});