获取相应tr中的当前索引

时间:2017-12-16 11:05:39

标签: javascript jquery



$("#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>
&#13;
&#13;
&#13;

我尝试了几种方法,但没有一种方法有效。我的简单逻辑是,当我点击 th 时,我想获得 tr 的当前索引就其父 tr 而言(点击)。我有一个代码片段,但它没有返回关于 tr 的索引,但如果我将选择器修改为$("#categoriesListing").index(this);,它会返回关于 th 的索引

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

1 个答案:

答案 0 :(得分:1)

问题是因为您在整个index()集中寻找th的{​​{1}}。只需使用#categoriesListing tr > th代替。

值得注意的是,您的HTML有点奇怪 - $(this).index()旨在用作“表格标题”。你已经将它们用于所有单元格,因此它在语义上是不正确的。我建议您将th中的th更改为tbody

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