jquery - 如何获取表格单元格的列索引

Question

如何获取 jQuery 表格中任何 HTML 分隔符元素的列索引？这是我的 HTML:

table {
	border:1px solid navy;
	width: 70%;
	text-align: center;
}
table th {
	text-align: center;
	width:100px;
	height:20px;
}
table td {
	width: 100px;
	height: 100px;
	vertical-align: top;
	text-align: right;
	border: 1px solid #c6c6ec;
}

<table>
  <tbody>
    <tr>
      <th>Header</th>
    </tr>
    <tr>
      <th>Header1</th><th>Header2</th><th>Header3</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Want this column index e.g.</td>
      <td></td>
    </tr>
    </tbody>
</table>

我已经设法使用以下 jQuery 获取行索引:

var text_var = "Want this column index e.g."
var elem = $('td').filter(function() { 
        var Text = $(this).contents()[0].textContent.trim();
        return parseInt(Text, 10) == text_var;
    });
var row_index_first = elem.parent().index();

我想获得具有类似内容的专栏..？

谢谢

Answer 1

逻辑非常相似，只需要直接检查text()而不将其转换为整数，然后在上调用index()元素。试试这个:

var text_var = "Want this column index e.g."
var elem = $('td').filter(function() {
  return $(this).text().trim() == text_var;
});
var row_index_first = elem.index();

console.log(row_index_first);

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Header</th>
    </tr>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Want this column index e.g.</td>
      <td></td>
    </tr>
  </tbody>
</table>