在行上单击表中获取隐藏的列值

Question

I have a table with four columns. The first two columns are hidden. I want to get the values of the second and third columns on row click. I can get the value of the third column using the below code. But how can I get the value of the hidden column?

$('body').on( 'click','#item-grid table tbody tr', function() {
    $('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3)').text());
});

Below is the table html.

<table class="table table-bordered table-condensed table-hover table-striped dataTable">
  <thead>
    <tr>
      <th id="item-grid_c0" style="display:none">Supplier ID</th>
      <th id="item-grid_c1" style="display:none">Supplier ID</th>
      <th id="item-grid_c2"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&amp;PurchaseOrder%5Bvoucher_no%5D=12&amp;PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&amp;PurchaseOrderDetails%5Bproject_id%5D=45&amp;PurchaseOrderDetails%5Bitem_id%5D=79&amp;ajax=item-grid&amp;sort=supplier"
        class="sort-link">Supplier</a>
      </th>
      <th id="item-grid_c3"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&amp;PurchaseOrder%5Bvoucher_no%5D=12&amp;PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&amp;PurchaseOrderDetails%5Bproject_id%5D=45&amp;PurchaseOrderDetails%5Bitem_id%5D=79&amp;ajax=item-grid&amp;sort=item"
        class="sort-link">Item</a>
      </th>
      <th id="item-grid_c4"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&amp;PurchaseOrder%5Bvoucher_no%5D=12&amp;PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&amp;PurchaseOrderDetails%5Bproject_id%5D=45&amp;PurchaseOrderDetails%5Bitem_id%5D=79&amp;ajax=item-grid&amp;sort=rate"
        class="sort-link">Rate</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd selected">
      <td style="display:none">
        <input type="hidden" id="ProjectPurchaseOrderSupplierwise_item_id_5" name="ProjectPurchaseOrderSupplierwise[item_id_5]" value="79" class="gridfield">
      </td>
      <td style="display:none">
        <input type="hidden" id="ProjectPurchaseOrderSupplierwise_supplier_id_5" name="ProjectPurchaseOrderSupplierwise[supplier_id_5]" value="14" class="gridfield">
      </td>
      <td>General</td>
      <td>Cement</td>
      <td>
        <input type="text" id="ProjectPurchaseOrderSupplierwise_rate_5" name="ProjectPurchaseOrderSupplierwise[rate_5]" value="50.00" readonly="readonly" class="gridfield">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Try like below.

$('body').on( 'click','#item-grid table tbody tr', function() {
    $(this).find('td:eq(1) input').val(); // 2nd column
    $(this).find('td:eq(2)').text(); // 3rd column
});

Answer 2

You can use either of the two :eq() Selector or :nth-child() Selector.

https://api.jquery.com/nth-child-selector/

https://api.jquery.com/eq-selector/

Click here Example code with your HTML

To get a specific cell by index, you can use :

 $(this).find('td:nth-child(2) input').val(); // 2nd column

 $(this).find('td:eq(1) input').val(); // 2nd column

 $(this).find('td:nth-child(3)').text(); // 3rd column
 $(this).find('td:eq(2)').text(); // 3rd column

Answer 3

\n

\n

\n

$('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3):visible').text());

\n

\n

\n