Jquery 通过单击每行中的按钮查找每行中文本框的值？

我已经动态生成了如下所示。我需要通过单击每行中的updateCart按钮来获取文本框的值

 @foreach (var item in Session["Cart"] as List<AP.WebApp.Models.Cart>)
                    {
                    <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input id="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input id="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input id="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>
                    }

---

但是警报（val）结果未定义。任何想法请分享。

您应该修改dom以使用重复的类而不是重复的ID。ID应该是

   <td id="qtyid">
       <input class="qty" type="text"  value="1"/></td>
   <td>0</td>
   <td>
       <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" />
   </td>
   <td>
       <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  />
   </td>

---

as@jai建议使用类

  <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input class="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>

---

首先，为多行复制相同的ID不是有效的html标记，这在使用javascript时会产生很多问题

因此，解决方案是使用类名或为每个元素应用唯一的id，这是好的，但不是更好的

@foreach(var item in Session["Cart"] as List < AP.WebApp.Models.Cart > ) { 
  <tr class="eachitem">
    <td> <img src = "@item.Path.Split('~')[1]"
  style="width:200px;height:auto" / > < p > @item.Title < /p></td >
    <td> 
    @if (item.Preview == 1) {

      @Html.CheckBox("preview", new {@
        checked = "checked"
      })
    } else {
      @Html.CheckBox("preview")
    } 
  </td>
  <td class="qtyid">
    <input class="qty" type="text"  value="1"/ > 
  </td>
  <td>0</td>
  <td>
    <input class="deleteCart" type="submit"  value="Delete"  data-assigned-id="@item.ID"/> 
  </td>
  <td>
    <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  / > 
  </td>
  </tr>
}

---

最好使用类名，而不是重复相同的ID。

  <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input class="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>

$('.cartItem').on('click', '#updateCart', function (e) {
            e.preventDefault();
var val = $(this).parents('.eachitem').find('.qty').val();
});

@foreach(var item in Session["Cart"] as List < AP.WebApp.Models.Cart > ) { 
  <tr class="eachitem">
    <td> <img src = "@item.Path.Split('~')[1]"
  style="width:200px;height:auto" / > < p > @item.Title < /p></td >
    <td> 
    @if (item.Preview == 1) {

      @Html.CheckBox("preview", new {@
        checked = "checked"
      })
    } else {
      @Html.CheckBox("preview")
    } 
  </td>
  <td class="qtyid">
    <input class="qty" type="text"  value="1"/ > 
  </td>
  <td>0</td>
  <td>
    <input class="deleteCart" type="submit"  value="Delete"  data-assigned-id="@item.ID"/> 
  </td>
  <td>
    <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  / > 
  </td>
  </tr>
}

$('.cartItem').on('click', '.updateCart', function (e) {
    e.preventDefault();
    var val = $(this).closest('tr').find('.qty').val();
});