根据单元格值选择html表格单元格答案

【问题标题】：select html table cell based on cell value根据单元格值选择html表格单元格
【发布时间】：2021-03-11 15:13:50
【问题描述】：

grvData 是表名，.tabulator-col-title 是包含列名的 div。当我使用下面的 jquery 代码获取列 .tabulator-headers div 的索引时，我得到零。请建议我如何知道 .tabulator-headers 类中 .tabulator-col-title 类的索引。

 $(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 目的租总租金折扣几个月建筑

【问题讨论】：

你可以，但更简单的方法是使用 css 类。对于每个租金 td 给他们 myrent 类，然后使用 jquery 选择它
所以Rent 是表内的值吗？你能举个例子说明一下这张桌子的样子吗？

标签： javascript jquery

【解决方案1】：

您可以获取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>

【讨论】：

我正在使用下面的代码，我一直得到零 alert($(".tabulator-col-title:contains(Rent)").index());但是它给了我这个特定类事件警报的正确长度($(".tabulator-col-title").length);
我编辑了我的问题并添加了 html 代码。 grvData 是表名，'tabulator-col-title' 是放置列名的类。我正在使用下面的代码，它给了我零警报($("#grvData .tabulator-col-title:contains('Rent')").index());
嗨，试试这样：console.log($("div.tabulator-col-title:contains('Rent')").closest(".tabulator-col").index());
鱼呼，明白了。谢谢斯瓦蒂。

【解决方案2】：

jQuery :contains selector 让这很容易

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

【讨论】：