Question

单击页面上的复选框时，我想更新ajax成功中的每个td元素。例如：我在一个表中有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

内部成功函数中，您可以使用以下内容遍历单行的每个td：

 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。工作示例here

Answer 2

您有几种选择。无需太多工作即可实现的最简单方法是，使用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
            }
        });

    });
});

在ajax成功中更新表的每个td值

2 个答案: