Home > Back-end >  Updating Td values in a table
Updating Td values in a table

Time:06-13

I am trying to update td text values after an ajax call that updates some values. I am having issues trying to select the correct tr so I can add the values and I cant seem to get this one. I have tried using the index as this will be unique for the class as the selector but no luck. Any help would be appreciated. Thank you.

Here is what I have so far. HTML looks like this

 <table  id="EditTbl">
    <thead>
        <tr >
            <th>
                Date
            </th>
            <th>
                BL Number
            </th>
            <th>
                Pick Up Number
            </th>
            <th>
                Carrier
            </th>

            <th>
                Submitted By
            </th>
            <th>
                Edit
            </th>

        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ListOfCompleted)
        {
        <tr >
            <td>
                @Html.DisplayFor(modelItem => item.TrDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BLNumber)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.PickUpNo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Carrier)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.LogisticUser)
            </td>
            <td>
                <button type="button"  data-toggle="modal" data-target="#ModalTest" value="@item.BLNumber" id="ModalBtnAction">Edit</button>
            </td>
        </tr>
        }
    </tbody>
</table>

JS looks like this.

function SaveEditInfo(id,pickup,carrier) {
$.ajax({
    type: "POST",
    url: "/Loading/SaveEditInfo",
    data: { id: id, pickup: pickup,carrier:carrier},
    success: function (data) {
        // Update values from Tr td with new information.
        var tblRow = $("#EditTbl tbody tr." data.trIndex);
        // Pickup
        tblRow.eq(3).text(data.pickUpNo);
        // Carrier
        tblRow.eq(4).text(data.carrier);
        // username
        tblRow.eq(5).text(data.logisticUser);
    }
});}

CodePudding user response:

it looks like you're updating something that doesn't exist.

you need to update the TD, not the TR.

// Update values from Tr td with new information.
var tblRow = $("#EditTbl tbody tr." data.trIndex);
var rowCols = tblRow.find("td");

// Pickup
rowCols.eq(3).text(data.pickUpNo);
// Carrier
rowCols.eq(4).text(data.carrier);
// username
rowCols.eq(5).text(data.logisticUser);
  • Related