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

Question

如何获取jQuery中表格中任何HTML divider元素的列索引？这是我的HTML：

table { 
 
\t border:1px solid navy; 
 
\t width: 70%; 
 
\t text-align: center; 
 
} 
 
table th { 
 
\t text-align: center; 
 
\t width:100px; 
 
\t height:20px; 
 
} 
 
table td { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t vertical-align: top; 
 
\t text-align: right; 
 
\t 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()上elem。试试这个：

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>