从Single Td（隐藏字段和标签）值中获取多个值

Question

我正在处理一个任务，从数据库中创建数据列表并将其绑定到Html表。 每行都有标识列，但不显示在表Td中隐藏的表上。 如果有任何新记录，如果它有Id，那么它应该更新...如果新记录没有任何id，那么它应该插入数据库usng jquery Ajax。

这是代码

<table border="1" id="tbuser">


     <tr style="background-color:burlywood; color:black">


                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Address1</th>
                <th>Country</th>
                <th>State</th>
                <th>City</th>
                <th>Delete</th>
                <th>Edit</th>

            </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td> <input type="hidden" id="Id" value="@item.ID" /><label id="Name">@item.Name</label></td>
                <td><label id="Phone">@item.Phone</label></td>
                <td><label id="Email">@item.Email</label></td>
                <td><label id="Address">@item.Address1</label></td>
                <td><label id="Country">@item.Country</label></td>
                <td><label id="State">@item.State</label></td>
                <td><label id="City">@item.City</label></td>


            </tr>                                                                               

        }

    </table>

这里是ajax实现的代码

$("#btnupdate").click(function () {

            var Details = [];

            debugger;
            var tabledetails = $("#tbuser").find("tr").each(function (index,obj) {
                var Id = $("#Id").val();
                var currentRow = $(this).closest("tr");
                debugger
                var details = {};



                details.Id = currentRow.find("td:eq(0)").text();
                details.Name = currentRow.find("td:eq(1)").text();
                details.Phone = currentRow.find("td:eq(2)").text();
                details.Email = currentRow.find("td:eq(3)").text();
                details.Address1 = currentRow.find("td:eq(4)").text();
                details.Country = currentRow.find("td:eq(5)").text();
                details.State = currentRow.find("td:eq(6)").text();
                details.City = currentRow.find("td:eq(7)").text();





                if (index >= 1)
               {
                 Details.push(details);
                    //calling ajax
                }
            });
            $.ajax({
                url: '/demo/Updatetabel',
                type: "POST",
                data: JSON.stringify(Details),
                dataType: "json",
                traditional: true,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    alert("Record Updated");
                },
                error: function () {
                    alert("An error has occured!!!");
                }
            });


        });

Answer 1

ID应始终是唯一的。

其次，然后我更改了一些代码并删除了ajax（仅用于示例）我希望这可以解决您的问题。

<强>演示

＆＃13;

＆＃13;

$("#btnupdate").click(function() {

  var Details = [];

  var tabledetails = $("#tbuser").find("tr").each(function(index, obj) {
    var currentRow = $(this);
    var Id = currentRow.find("td:eq(0) input").val();
    var details = {};
    details.Id = Id + currentRow.find("td:eq(0)").text();
    details.Name = currentRow.find("td:eq(1)").text();
    details.Phone = currentRow.find("td:eq(2)").text();
    details.Email = currentRow.find("td:eq(3)").text();
    details.Address1 = currentRow.find("td:eq(4)").text();
    details.Country = currentRow.find("td:eq(5)").text();
    details.State = currentRow.find("td:eq(6)").text();
    details.City = currentRow.find("td:eq(7)").text();





    if (index >= 1) {
      Details.push(details);
      //calling ajax
    }
  });
console.log(Details)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tbuser">


  <tr style="background-color:burlywood; color:black">


    <th>Name</th>
    <th>Phone</th>
    <th>Email</th>
    <th>Address1</th>
    <th>Country</th>
    <th>State</th>
    <th>City</th>
    <th>Delete</th>
    <th>Edit</th>

  </tr>
  <tr>
    <td> <input type="hidden" class="Id" value="1" /><label class="Name">1</label></td>
    <td><label class="Phone">1</label></td>
    <td><label class="Email">1</label></td>
    <td><label class="Address">1</label></td>
    <td><label class="Country">1</label></td>
    <td><label class="State">1</label></td>
    <td><label class="City">1</label></td>


  </tr>
  <tr>
    <td> <input type="hidden" class="Id" value="2" /><label class="Name">2</label></td>
    <td><label class="Phone">2</label></td>
    <td><label class="Email">2</label></td>
    <td><label class="Address">2</label></td>
    <td><label class="Country">2</label></td>
    <td><label class="State">2</label></td>
    <td><label class="City">2</label></td>


  </tr>

</table>

<button id="btnupdate">btnupdate</button>

＆＃13;

＆＃13;

＆＃13;