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

Question

如何获取jQuery中表中任何HTML divider元素的列索引？ 这是我的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 eg</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()而不将其转换为整数，然后在elem上调用index() 。 尝试这个：

 var text_var = "Want this column index eg" 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 eg</td> <td></td> </tr> </tbody> </table>