select html 表格单元格基于单元格值

Question

grvData is the table name and.tabulator-col-title is the div which holds the Column name. I get zero when I use the below jquery code to get the index of the column.tabulator-headers div. Please suggest me how do I know the index of.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 Purpose Rent Total Rent Discount Months Building

Answer 1

jQuery :contains selector makes this quite easy

 $('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

You can get index value of the th and then just use td:eq("indexvalueofth") to get required values.

Demo Code :

 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>