Question

我在表格的单元格中有一些checkbox。我正在绑定每个上的点击事件。单击时，我想获取当前单元格相对于父行的索引。

例如：

<tr>
<td>...</td>
<td><input type='checkbox'>....</td>
</tr>

我希望获得1的点击事件checkbox。

这是我正在使用的JavaScript代码：

Grid.tbody.find("input[type='checkbox']").each(function () {
    $(this).click(function () {
        var isChecked = $(this).prop('checked');
        var dataItem = tablesGrid.dataItem($(this).closest('tr'));
        var i = $(this).index();
        alert(i);
    });
});

在这个JavaScript代码中，我希望获得当前单元格的索引，I变量不起作用。

Answer 1

$(this)中的{p> $(this).index()是复选框，而不是单元格td。

获取单元格索引使用，

$(this).closest('td').index();  //or $(this).parent().index() if there is no further nesting.

Grid.tbody.find("input[type='checkbox']").each(function () {
    $(this).click(function () {        
        var isChecked = $(this).prop('checked');
        var dataItem = tablesGrid.dataItem($(this).closest('tr'));
        var i = $(this).closest('td').index();
        alert(i);
    });
});

此外，我建议您使用.change()事件代替click()

获取可见元素索引

var $currentTr = $(this).closest('tr');
var  i = $('td:visible',$currentTr).index($(this).closest('td'))

Answer 2

您可以调用td的索引，$(this).index()将为您提供其父级checkbox内的td索引

Grid.tbody.find("input[type='checkbox']").click(function () {
    var isChecked = this.checked;
    var dataItem = tablesGrid.dataItem($(this).closest('tr'));
    var i = $(this).closest('td').index();
    alert(i);
});

Answer 3

您可以使用目标复选框上的parent（）调用来访问列的索引。如果这就是你的表格。

$("#grid input[type='checkbox']").click(function(e) {
  var isChecked = $(this).prop('checked');
  var $dataItem = $(this).parent();
  var i = $dataItem.index(); // Gives the column number in any row
  $('#log').append("<p>").text(i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
<table id="grid">
  <tr>
    <td>Row 1</td>
    <td>
      <input type="checkbox" name="check1">
    </td>
    <td>
      <input type="checkbox" name="check1">
    </td>
    <td>
      <input type="checkbox" name="check1">
    </td>
    <td>
      <input type="checkbox" name="check1">
    </td>
  </tr>
  <tr>
    <tr>
      <td>Row 2</td>
      <td>
        <input type="checkbox" name="check2">
      </td>
      <td>
        <input type="checkbox" name="check2">
      </td>
      <td>
        <input type="checkbox" name="check2">
      </td>
      <td>
        <input type="checkbox" name="check2">
      </td>
    </tr>
    <tr>
      <tr>
        <td>Row 3</td>
        <td>
          <input type="checkbox" name="check3">
        </td>
        <td>
          <input type="checkbox" name="check3">
        </td>
        <td>
          <input type="checkbox" name="check3">
        </td>
        <td>
          <input type="checkbox" name="check3">
        </td>
      </tr>
</table>

获取相对于行的表格单元格的索引

3 个答案: