使用jQuery基于变量选择表列

时间:2017-08-11 17:46:55

标签: jquery

我有一个动态创建的表,我需要根据第一列中的值添加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>

1 个答案:

答案 0 :(得分:0)

假设您要选择 190 + 列,将第40列的值添加40 150 +

您可以获取此类单元格的索引:

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

然后选择列:

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>