javascript - 如何选择和操作表 jQuery 中的列

Question

jQuery('.rolly').hover( function() { 
  var colorclass = jQuery(this).attr('colorclass'); 
  var colorcolumn = jQuery(this).attr('colorcolumn'); 
  var selector = "#table-struct tr td:nth-child(" + colorcolumn + ")";
  jQuery(selector).toggleClass(colorclass); 
});

<img id="img1" class="rolly" title="Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_plus-image.png" alt="" width="150" height="150" />
<img class="rolly" title="bRT Biddr" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/brt_Biddr-image.png" alt="" width="150" height="150" />
<img class="rolly" title="Biddr API" onmouseover="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API_hover.png';" onmouseout="this.src='http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png';" src="http://www.brealtime.com/wp-content/uploads/2016/01/biddr_API-image.png" alt="" width="150" height="150" />

<!-- Begin Table -->  

<div id="table-struct">
  <table class="table table-bordered table-right" style="margin-right: 70px;">
    <thead>

      <tr>
        <td>SIMPLE INTEGRATION:seamless
          setup process to get started</td>
        <td align="center">X</td>
        <td>X</td>
        <td>X</td>
      </tr>

    </thead>
    <tbody>

      <tr>
        <td>NO ADVERSE EFFECTS OF LATENCY:
          publishers can set the overall
          timeout threshold</td>
        <td>Across All Header
          Bidding Partners</td>
        <td>For The bRT
          Integration Only</td>
        <td>** Controlled by
          Publisher**</td>
      </tr>

      <tr>
        <td>HORIZONTAL INTEGRATION: unlike
          some integrations that will
          compete only for first look or
          cookie matching, we compete
          on every impression served</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>ACCOUNT MANAGEMENT: access to
          a technical &amp; operational
          resource to ensure rapid and
          effective support</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>ACCESS THE bRT MARKETPLACE:
          drive significantly more
          competition with access to
          bRT’s unparalleled proprietary
          programmatic and managed
          advertiser demand</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>BILL OFF PUBLISHER’S AD SERVER:
          ensures no risk of revenue
          loss, guaranteeing results
          yielded are purely incremental</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
      </tr>

      <tr>
        <td>MEDIATION: we optimize all
          partners to maximize
          competition and drive the
          highest CPM possible</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>EQUAL PLAYING FIELD: create
          parity and fairness for all
          demand partners competing
          at the same level</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>INCREASED OPERATIONAL
          EFFICIENCY: a publisher’s ops
          team does not need to worry
          about multiple integrations,
          managing discrepancies &amp; the
          adverse performance effects
          of working with multiple
          header providers</td>
        <td>X</td>
        <td></td>
        <td></td>
      </tr>

    </tbody>
  </table>
</div>

我在 WordPress 帖子中这样做 因此，当鼠标悬停在特定图像上并使用 jquery 更改列的颜色时，我试图选择一个完整的列。因此，当我将鼠标悬停在第一张图片上时，第二列会变成红色，当我将鼠标悬停在第二张图片上时，它会变成绿色，依此类推。有什么建议么？我有类 'rolly' 的图像，并且还编写了一些 jQuery 逻辑。只是不确定当我应用它时逻辑是否有意义。到目前为止，我有点不成功。

Answer 1

类 .rolly 没有属性“colorclass”。事实上，你要做的是识别列，那么你为什么不这样标记表数据呢？像这样:

<tr>
<td class="col-1">NO ADVERSE EFFECTS OF LATENCY:
publishers can set the overall
timeout threshold</td>
<td class="col-2">Across All Header
Bidding Partners</td>
<td class="col-3">For The bRT
Integration Only</td>
<td class="col-4">** Controlled by
Publisher**</td>
</tr>

然后让您的脚本在您翻转图像时更改特定列类的背景？像这样:

<script type="text/javascript">
$(document).ready(function(){
    $("#img1").hover(function(){
        $(".col-2").css('background-color', 'red');
    }, function() {
        $(".col-2").css('background-color', 'white');
    });
    $("#img2").hover(function(){
        $(".col-3").css('background-color', 'red');
    }, function() {
        $(".col-3").css('background-color', 'white');
    });
    $("#img3").hover(function(){
        $(".col-4").css('background-color', 'red');
    }, function() {
        $(".col-4").css('background-color', 'white');
    });
});