Как изменить значение определенной строки таблицы, нажав на другое значение в той же строке, используя ajax

Question

Я пытаюсь изменить последнее значение таблицы в строке, щелкнув значение 3rd td. Однако, когда я нажимаю 3-й td в любой строке таблицы, он изменяет только последнее значение td в первой строке.

$(document).ready(function(){ 
  $('.selectslots').change(function(){ 
    var myselectslots=$(this).val(); 
    var rowrate = $(this).closest('tr').find('td:last').text(); 
    $(this).attr('value', rowrate); console.log("clicked on the slot"); 
    console.log(rowrate); //The selectslots class is a class for the values of the third column. 

    $.ajax({
            url:'http://127.0.0.1/sufee/slotpurchase.php',
            method:'POST',
            data:{
                        myselectslots:myselectslots},
                        success:function(data){
                        //alert(data);
                        console.log(myselectslots);

                    if (myselectslots==30){
                        $('tr td:eq(5)').html('90');
                    }
                    else{
                        $('tr td:eq(5)').html(80);

                    } 

                }
            });
      });

Я ожидаю, что если я нажму на значение в столбце определенной строки, последнее значение этой строки должно измениться. Проблема в том, что пока изменяется только последнее значение первой строки независимо от строки, по которой я щелкнул. Пожалуйста, помогите.

Answer 1

Вы можете сохранить строку в переменной перед вызовом ajax, чтобы использовать ее при успешном обратном вызове

$(document).ready(function(){ 
  $('.selectslots').change(function(){ 
    var myselectslots=$(this).val(); 
    var row = $(this).closest('tr')
    var rowrate = row.find('td:last').text(); 
    $(this).attr('value', rowrate); console.log("clicked on the slot"); 


    $.ajax({
            url:'http://127.0.0.1/sufee/slotpurchase.php',
            method:'POST',
            data:{
                        myselectslots:myselectslots},
                        success:function(data){
                        //alert(data);
                        console.log(myselectslots);

                    if (myselectslots==30){
                        row.find('td:eq(5)').html('90');
                    }
                    else{
                       row.find('td:eq(5)').html(80);

                    } 

                }
            });
      });