如何使用jQuery从HTML表获取复选框和文本框值

Question

I have a dynamically created HTML table with values- Partial View There are two TextBoxes for 'Quantity' and 'Remarks' and one checkbox

  <table style="border:0;width:100%;padding:5px" class="table_style" id="mytable">
    <tbody>
             @for (int i = 0; i < dtServices.Rows.Count - 1; i++)
             {           
                    <tr>
                        <td style="text-align:left;vertical-align:top">                
                            @Html.HiddenFor(model => model.ServiceListDetails.UserXId, new { Id = "hduId", Value = userId })
                            @Html.HiddenFor(model => model.ServiceListDetails.SessionXId, new { Id = "hdsId", Value = HttpContext.Current.Session["UserId"] })     
                            @Html.HiddenFor(Model => Model.ServiceListDetails.Id, new { @Id = "hdServiceId",Value = @dtServices.Rows[i]["ServiceId"].ToString() })  </td>

                            @* <td style="text-align:left;vertical-align:top">@dtServices.Rows[i]["ServiceId"].ToString()</td> *@
                            <td style="text-align:left;vertical-align:top">@dtServices.Rows[i]["ServiceName"].ToString()</td>
                            <td style="text-align:left;vertical-align:top">@dtServices.Rows[i]["ServiceUnit"].ToString()</td>

                            <td style="text-align:left;vertical-align:top">@Html.TextBoxFor(Model => Model.ServiceListDetails.ServicelistQuatity, new { @Id = "txtQty_" + @dtServices.Rows[i]["ServiceId"].ToString(), @style = "width:120px" })</td>
                            <td style="text-align:left;vertical-align:top">@Html.TextBoxFor(Model => Model.ServiceListDetails.ServicelistRemarks, new { @Id = "txtRemark_" + @dtServices.Rows[i]["ServiceId"].ToString(), @style = "width:200px" })</td>
                            <td>@Html.CheckBox("assignids")</td>    
                            <td style="text-align:left;vertical-align:top">

                        </td>
                    </tr>
             }
     </tbody>
</table>

I would like to get the values of the the selected rows by getting the selected row and the corresponding values in the textboxes using jquery on click of button in View

  <input type="button" id="btnPreview" name="Preview" value=" Preview " class="button"/>

I tried googling and came to this. But still not working.The values are 'undefined'

    $("#btnPreview").click(function () {
     var strmsg = "Values = ";
     var rows = $('#mytable tbody >tr');
     var columns;
     for (var i = 0; i < rows.length; i++) {
         columns = $(rows[i]).find('td');
         for (var j = 0; j < columns.length; j++) {

             if ($(columns[j]).find('assignids').is(':checked'))
             {
                 var itemcode = $(columns[j]).find('txtQty_').val();
                 strmsg = strmsg + itemcode;
             }
         }
     }

Please anyone help me.. I have been stuck with this for more than a week now :-(((

Any help appreciated.

Answer 1

Instead of using $(rows[i]) and $(columns[j]) , have you tried using jQuery's eq() method instead?

Here's a good resource for it: http://api.jquery.com/eq/