Get current th index in respective tr

Question

$("#categoriesListing").on('click', "tbody tr:not(.startingbalance):not(.totalbalance) > th", function() {
  var currentIndex = $("#categoriesListing tr > th").index(this);
  console.log(currentIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table ui-jq="dataTable" ui-options="{ }" class="table table-striped b-t b-b dataAppender " id="categoriesListing">
  <thead>
    <tr>
      <th>Description</th>
      <th> Jan-17 </th>
      <th> Oct-17 </th>
      <th> Nov-17 </th>
      <th> Dec-17 </th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="startingbalance">
      <th>Starting Balance</th>
      <th>$1000</th>
      <th>$1246</th>
      <th>$1624</th>
      <th>$4910</th>
      <th> </th>
    </tr>
    <tr data-catid="1">
      <th>Projected Deposit</th>
      <th>$246</th>
      <th></th>
      <th>$2273</th>
      <th>$11902</th>
      <th> $14421</th>
    </tr>
    <tr data-catid="2">
      <th>Projected Cost Amex</th>
      <th></th>
      <th>$378</th>
      <th>$558</th>
      <th></th>
      <th> $936</th>
    </tr>
    <tr data-catid="3">
      <th>Projected Cost Cash</th>
      <th></th>
      <th></th>
      <th>$455</th>
      <th></th>
      <th> $455</th>
    </tr>
    <tr data-catid="4">
      <th>Projected Overhead</th>
      <th></th>
      <th></th>
      <th></th>
      <th>$1849</th>
      <th> $1849</th>
    </tr>
    <tr class="totalbalance">
      <th>Total Balance</th>
      <th>$1246</th>
      <th>$1624</th>
      <th>$4910</th>
      <th>$18661</th>
      <th></th>
      <th></th>
    </tr>
  </tbody>
</table>

I have tried a couple of ways but none of them worked .My simple logic is that when I click on a th I want to get the current index of tr that is (clicked) with respect of its parent tr . I have a snippet made but it did not return the index with respect of tr but it return index with respect of th , if I modify my selector to $("#categoriesListing").index(this);

$("#categoriesListing").on('click' , "tbody tr:not(.startingbalance):not(.totalbalance) > th" , function(){
         var currentIndex = $("#categoriesListing tr > th").index(this);
         console.log(currentIndex);
    });

Just `$(this).index()` should work. If not, please edit your question to include the HTML (or at least a sample of it) — Rory McCrossan, Dec 16 '17 at 11:06
thanks @RoryMcCrossan please post this as answer . this solved my problem :) — Faisal Mehmood Awan, Dec 16 '17 at 11:12
to much busy .. forget to use td . thanks for pointing that out . and also thanks for great help :) @RoryMcCrossan — Faisal Mehmood Awan, Dec 16 '17 at 11:19

score 1 · Accepted Answer · answered Dec 16 '17 at 11:13

The issue is because you're looking for the index() of the th within the entire #categoriesListing tr > th set. Just use $(this).index() instead.

It's also worth noting that your HTML is a little odd - th is intended to be use as a 'table heading'. You've used them for all cells so it's semantically incorrect. I'd suggest changing the th within the tbody to td instead.

$("#categoriesListing").on('click', "tbody tr:not(.startingbalance):not(.totalbalance) > th", function() {
  var currentIndex = $(this).index();
  console.log(currentIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table ui-jq="dataTable" ui-options="{ }" class="table table-striped b-t b-b dataAppender " id="categoriesListing">
  <thead>
    <tr>
      <th>Description</th>
      <th> Jan-17 </th>
      <th> Oct-17 </th>
      <th> Nov-17 </th>
      <th> Dec-17 </th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="startingbalance">
      <th>Starting Balance</th>
      <th>$1000</th>
      <th>$1246</th>
      <th>$1624</th>
      <th>$4910</th>
      <th> </th>
    </tr>
    <tr data-catid="1">
      <th>Projected Deposit</th>
      <th>$246</th>
      <th></th>
      <th>$2273</th>
      <th>$11902</th>
      <th> $14421</th>
    </tr>
    <tr data-catid="2">
      <th>Projected Cost Amex</th>
      <th></th>
      <th>$378</th>
      <th>$558</th>
      <th></th>
      <th> $936</th>
    </tr>
    <tr data-catid="3">
      <th>Projected Cost Cash</th>
      <th></th>
      <th></th>
      <th>$455</th>
      <th></th>
      <th> $455</th>
    </tr>
    <tr data-catid="4">
      <th>Projected Overhead</th>
      <th></th>
      <th></th>
      <th></th>
      <th>$1849</th>
      <th> $1849</th>
    </tr>
    <tr class="totalbalance">
      <th>Total Balance</th>
      <th>$1246</th>
      <th>$1624</th>
      <th>$4910</th>
      <th>$18661</th>
      <th></th>
      <th></th>
    </tr>
  </tbody>
</table>

Get current th index in respective tr

1 Answers1