select html table cell based on cell value

1
votes

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
2
javascriptjquery
you can but an easier way is to use css class. for each rent td give them class of myrent and then use jquery to select it - Andam
so Rent is a vlaue inside the table? can you give an example on how the table looks? - caramba

2 Answers

0
votes

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>
0
votes

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>