如何获取表格表头中点击切换的图标所在列的位置（如第一列、第二列等）

Got it, let's sort this out for you! Here's how to modify your code to grab the column position (like "第一列", "第二列", etc.) every time you toggle the caret icon:

Updated JavaScript Code #

$(".fa-caret-down, .fa-caret-up").click(function(){
    // Simplify class toggling with one line
    $(this).toggleClass("fa-caret-down fa-caret-up");
    
    // Locate the parent table header cell of the clicked icon
    const headerCell = $(this).closest('th');
    // index() returns 0-based position, add 1 to get 1-based column number
    const columnPosition = headerCell.index() + 1;
    // Optional: Grab the column header text for more context
    const columnName = headerCell.text().trim();
    
    // Output the column position (adjust the message format as needed)
    console.log(`点击的是第${columnPosition}列，表头为：${columnName}`);
});

Key Logic Breakdown: #

• .closest('th'): Finds the nearest parent <th> element of the clicked icon—since your icons are nested directly inside table headers, this reliably targets the column's container.
• .index(): jQuery's built-in method returns the 0-based position of the <th> among its sibling header cells. Adding 1 converts this to a natural 1-based number (matching "第一列", "第二列" as you need).
• .toggleClass(): Replaces your original if-else check with a cleaner one-liner that swaps the two caret classes automatically.
• Updated Selector: I added .fa-caret-up to the click listener so the event works even after the icon has been toggled to the up state—your original code would only listen for clicks on the down icon, which would break after the first toggle.

内容的提问来源于stack exchange，提问作者neznamy03