select html 表格單元格基於單元格值

Question

grvData 是表名，.tabulator-col-title 是包含列名的 div。 當我使用下面的 jquery 代碼獲取 column.tabulator-headers div 的索引時，我得到零。 請建議我如何知道.tabulator-col-title class in.tabulator-headers class 的索引。

 $(document).ready(function () { alert($(".tabulator-col-title:contains('Rent')").index()); });

 <div cellspacing="0" id="grvData" style="border-collapse: collapse; height: 100%;" class="tabulator" role="grid" tabulator-layout="fitDataFill"> <div class="tabulator-header" style="padding-right: 0px;"> <div class="tabulator-headers" style="margin-left: 0px;"> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="id" title="" style="min-width: 40px; height: 29px; width: 86px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">ID</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="purpose" title="" style="min-width: 40px; height: 29px; width: 103px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Purpose</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="rent" title="" style="min-width: 40px; height: 29px; width: 67px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Rent</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="total_rent" title="" style="min-width: 40px; height: 29px; width: 101px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Total Rent</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="discount" title="" style="min-width: 40px; height: 29px; width: 94px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Discount</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="months" title="" style="min-width: 40px; height: 29px; width: 83px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Months</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> <div class="tabulator-col tabulator-sortable" role="columnheader" aria-sort="none" tabulator-field="building" title="" style="min-width: 40px; height: 29px; width: 273px;"> <div class="tabulator-col-content"> <div class="tabulator-col-title-holder"> <div class="tabulator-col-title">Building</div> <div class="tabulator-col-sorter"> <div class="tabulator-arrow"></div> </div> </div> </div> <div class="tabulator-col-resize-handle"></div> <div class="tabulator-col-resize-handle prev"></div> </div> </div> <div class="tabulator-frozen-rows-holder"></div> </div> </div>

ID 用途 租金 總租金 折扣 月 建設

Answer 1

jQuery :contains選擇器使這很容易

 $('tr:first td:contains("Rent")').css('color', 'red')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Rent</td> <td>Cell 4</td> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Rent</td> <td>Cell 4</td> </tr> </table>

Answer 2

您可以獲取th的索引值，然后只需使用td:eq("indexvalueofth")來獲取所需的值。

演示代碼：

 var indexs =$("thead th:contains('Rent')").index();//get index of th console.log($("tbody tr:eq(0) td:eq("+indexs+") ").text());//pass it inside `eq()`

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>Firstname</th> <th>Rent</th> </tr> </thead> <tbody id="myTable"> <tr> <td>John</td> <td>123</td> </tr> <tr> <td>Mary</td> <td>1233</td> </tr> </tbody> </table>