обновите каждое значение td таблицы в успехе ajax

Question

У меня на странице есть флажок, и я хочу обновить каждый элемент td в успехе ajax. Например: у меня есть 6 строк в таблице, на каждую строку я посылаю вызов ajax, и только в этой текущей строке я хочу обновить элемент td.

var val1 = [];
 $(".checkbox").change(function () {
        debugger;

        var val3 = $("#RID").val();
        var val4 = $("#MID").val();

        $('#subList input:checked').each(function () {
            val1.push($(this).attr('id'));
        });


        $("#tblOptions > tbody > tr").each(function () {
            debugger;
            var tr = $("#tblOptions > tbody > tr")
            var val2 = $(this).find('input:hidden')[0].value
            $.ajax({
                type: "GET",
                url: "/Value/ValidateCheck",
                data: { param1: val1, param2: val2, param3: val3, param4: val4 },
                datatype: "json",
                traditional: true,

                success: function (data) {
                  //here i want to update the current td element 

                }
            });

        });
    });

Таблица HTML:

@model Models.Checklist
<table class="table table-responsive table-bordered mb-lg " id="tblOptions">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody id="tbodyOP">
        @for (int i = 0; i < Model.Checklist.Count; i++)
        {
            <tr>
                @Html.HiddenFor(m => Model.Checklist[i].val1, new { @class = "Column1" })                
                <td>@Html.DisplayFor(m => Model.Checklist[i].val2, new { @class = "form-control deletecls", required = "required" })</td>
                <td></td> //Blank td where value need to be added
                <td>@Html.TextBoxFor(m => Model.Checklist[i].val3, new { @class = "form-control deletecls", required = "required" })</td>
            </tr>
        }
    </tbody>
</table>

Answer 1

У вас есть несколько вариантов.Самый простой способ реализовать без особой работы - найти правильные элементы с помощью jquery, и это будет что-то вроде этого:

$(".checkbox").change(function () {
    debugger;

    var val3 = $("#RID").val();
    var val4 = $("#MID").val();

    $('#subList input:checked').each(function () {
        val1.push($(this).attr('id'));
    });

    var rowTds = $(this.closest("tr")).find("td"); //to find all the checkboxe's row tds
    rowTds.each(function () {          
        $.ajax({
            type: "GET",
            url: "/Value/ValidateCheck",
            data: { param1: val1, param2: val2, param3: val3, param4: val4 },
            datatype: "json",
            traditional: true,

            success: function (data) {
             $(this).text(data); //if you only want to update the text of the tds
            }
        });

    });
});

Answer 2

Внутри функции успеха вы можете использовать следующее, чтобы пройти каждый тд одной строки:

 var i=0;
 val1 = "ciao";
 val2 = "ciao2";
 val3 = "ciao3";
 val4 = "ciao4";
 var arr = [val1, val2, val3, val4];
 $(this).find('td').each (function() {
     $(this).html(arr[i]); 
     i++;
 });

Измените val1-4 с вашими новыми данными. Рабочий пример здесь