jQueryを使用して変数に基づいて表の列を選択

Question

動的に作成された表があり、最初の列の値に150を加算して列を選択する必要があります。私は右のセルを見つけることができますが、私は列を選択する方法を見つけることができません。

var firstCol = $('.PriceTable td:nth-child(2)'); 
 
var firstColValue = parseInt($('.PanelHeaderPermanent:first').text(), 10); 
 
var colThreeValue = firstColValue + 300; 
 
var colThree = $(`td.PanelHeaderPermanent:contains("${colThreeValue}")`); 
 

 

 

 

 
$(firstCol).addClass('showCol'); 
 
$(colThree).addClass('showCol');

.showCol { 
 
    border: 1px dashed purple; 
 
    display: table-cell!important; 
 
    background-color: teal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="FullWidth" border="0"> 
 
<tr> 
 
<td align="left"></td><td align="right"><table class="PriceTable FullWidth" border="0"> 
 
<tr> 
 
<td></td><td class="PanelHeaderPermanent">150+</td><td class="PanelHeaderPermanent">160+</td><td class="PanelHeaderPermanent">170+</td><td class="PanelHeaderPermanent">180+</td><td class="PanelHeaderPermanent">190+</td><td class="PanelHeaderPermanent">200+</td><td class="PanelHeaderPermanent">210+</td><td class="PanelHeaderPermanent">220+</td> 
 
</tr><tr> 
 
<td align="right">Your Price</td><td><span itemprop="priceCurrency" content="USD">$</span><span itemprop="price">2.44</span></td><td>$2.44</td><td>$2.43</td><td>$2.43</td><td>$2.42</td><td>$2.42</td><td>$2.41</td><td>$2.41</td> 
 
</tr> 
 
</table></td> 
 
</tr> 
 
</table>

Answer 1

のはあなたがそのような細胞の指標を得ることができます150+

最初のカラムの値に40を加算して得られた列190+を選択したいと仮定しましょう：

var colThreeIdx = $('td.PanelHeaderPermanent:contains("' + colThreeValue + '")').index() + 1; 

とso se

var colThree = $('.PriceTable td:nth-child(' + colThreeIdx + ')'); 

スニペット：

var firstCol = $('.PriceTable td:nth-child(2)'); 
 
var firstColValue = parseInt($('.PanelHeaderPermanent:first').text(), 10); 
 
var colThreeValue = firstColValue + 40; 
 
var colThreeIdx = $('td.PanelHeaderPermanent:contains("' + colThreeValue + '")').index() + 1; 
 
var colThree = $('.PriceTable td:nth-child(' + colThreeIdx + ')'); 
 

 

 

 

 
$(firstCol).addClass('showCol'); 
 
$(colThree).addClass('showCol');

.showCol { 
 
    border: 1px dashed purple; 
 
    display: table-cell!important; 
 
    background-color: teal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table class="FullWidth" border="0"> 
 
    <tr> 
 
     <td align="left"></td> 
 
     <td align="right"> 
 
      <table class="PriceTable FullWidth" border="0"> 
 
       <tr> 
 
        <td></td> 
 
        <td class="PanelHeaderPermanent">150+</td> 
 
        <td class="PanelHeaderPermanent">160+</td> 
 
        <td class="PanelHeaderPermanent">170+</td> 
 
        <td class="PanelHeaderPermanent">180+</td> 
 
        <td class="PanelHeaderPermanent">190+</td> 
 
        <td class="PanelHeaderPermanent">200+</td> 
 
        <td class="PanelHeaderPermanent">210+</td> 
 
        <td class="PanelHeaderPermanent">220+</td> 
 
       </tr> 
 
       <tr> 
 
        <td align="right">Your Price</td> 
 
        <td><span itemprop="priceCurrency" content="USD">$</span><span itemprop="price">2.44</span></td> 
 
        <td>$2.44</td> 
 
        <td>$2.43</td> 
 
        <td>$2.43</td> 
 
        <td>$2.42</td> 
 
        <td>$2.42</td> 
 
        <td>$2.41</td> 
 
        <td>$2.41</td> 
 
       </tr> 
 
      </table> 
 
     </td> 
 
    </tr> 
 
</table>