Найти индекс столбца таблицы с конкретным идентификатором - PullRequest
Новая
       12

Найти индекс столбца таблицы с конкретным идентификатором

0 голосов
/ 06 июня 2019

Это мой стол 

                 <table>
                    <thead>
                            <tr>
                                <th>0001</th>
                                <th class="hidden">0002</th>
                                <th id="myColumn">0003</th>
                                <th>0004</th>
                     ...........
                     ...........
                 </table>

Я хочу получить индекс th с идентификатором myColumn. Результат должен быть 2.
Примечание : в моей таблице есть скрытый столбец.

Ответы [ 3 ]

2 голосов
/ 06 июня 2019

Вы можете использовать .index() непосредственно на элементе: 

$('#myColumn').index()

Демо 

console.log($('#myColumn').index())
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>0001</th>
      <th class="hidden">0002</th>
      <th id="myColumn">0003</th>
      <th>0004</th>
    </tr>
    </head>
</table>
0 голосов
/ 06 июня 2019

Как и во многих, многих случаях, этого легче достичь, а также намного чище с vanilla JS.

Собственный API DOM хранит это в каждой ячейке таблицы в HTMLTableCellElement.prototype.cellIndex.Строки таблицы имеют HTMLTableRowElement.prototype.rowIndex (если вам небезразличен номер строки): 

console.log(myColumn.cellIndex);
console.log(myColumn.parentElement.rowIndex);
<table>
  <thead>
    <tr>
      <th>0001</th>
      <th class="hidden">0002</th>
      <th id="myColumn">0003</th>
      <th>0004</th>
    </tr>
  </thead>
</table>
0 голосов
/ 06 июня 2019

Пожалуйста, проверьте это. Я думаю, что это то, что вы хотите. 

var index = $("#myColumn").index();
console.log("column index  " +index);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
                    <thead>
                            <tr>
                                <th>0001</th>
                                <th class="hidden">0002</th>
                                <th id="myColumn">0003</th>
                                <th>0004</th>
                                </thead>
                    
                 </table>
...