第一列中的突出显示单元格用于结果/获胜突出显示的单元格答案

【问题标题】：Highlight cell in first column for resulting/winning highlighted cell第一列中的突出显示单元格用于结果/获胜突出显示的单元格
【发布时间】：2017-01-10 19:10:33
【问题描述】：

请在 jsfiddle 上查看我的代码，因为我似乎不知道如何在此处发布。按下“点击抽奖”按钮后，10秒后，确定中奖者。但是，只有获胜者的票号会突出显示。

需要添加什么来突出显示相应的中奖投票代表姓名？

https://jsfiddle.net/Nick_Chand/tymv6m03/

<div class="container">

<table style="width: 100%; height: 100%; margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <td style="width: 50%; text-align: center; vertical-align: middle;" rowspan="2">
        <button class="choosewinner" style="text-align: center; font-weight: bold; font-size: 18px;">Click to Draw a Winner</button>
      </td>
      <td align="center;" style="text-align: center; font-size: 16px; font-weight: bold;">WIN A PRIZE OF $</td>
    </tr>
    <tr>
      <td style="width: 50%; text-align: center; font-weight: bold; color: #E63946">Qualifying Reps - Prize Number 1</td>
    </tr>
  </tbody>
</table>

<table id="table_id" class="table text-center">


  <tbody class="row" style="font-size: 12px; ">

    <table class="tableizer-table" >
      <thead>
        <tr class="tableizer-firstrow">
          <th style="text-align: center;">_______Rep_______</th>
          <th style="text-align: center;">_Ballots_</th>
          <th style="text-align: center;">_Probability_</th>
          <th style="text-align: center;">1</th>
          <th style="text-align: center;">2</th>
          <th style="text-align: center;">3</th>
          <th style="text-align: center;">4</th>
          <th style="text-align: center;">5</th>
          <th style="text-align: center;">6</th>
          <th style="text-align: center;">7</th>
          <th style="text-align: center;">8</th>
          <th style="text-align: center;">9</th>
          <th style="text-align: center;">10</th>
        </tr>
      </thead>
      <tbody align=center>

A.B.50.26% 1 2 3 4 5 D.K60.31% 1 2 3 4 5 6 T.R90.47% 1 2 3 4 5 6 7 8 9 G.J30.16% 1 2 3

【问题讨论】：

如果对您有用，请务必将答案标记为正确。

标签： javascript html css

【解决方案1】：

$(".choosewinner").click(function() {
  //highlight();
  var startTime = new Date().getTime();
  var interval = setInterval(function() {
    if (new Date().getTime() - startTime > 10000) {
      clearInterval(interval);
      $('.highlight').addClass('youwin');
      **$('.highlight').parent().children(':first-child').addClass('youwin');**
      return;
    }
    highlight();
  }, 200);
});

【讨论】：

@NickChand 那么你能接受它作为正确答案吗？

【解决方案2】：

添加此代码以突出显示名称

$('.highlight').addClass('youwin').parent().find('td:first-child').addClass('youwin');

【讨论】：

【解决方案3】：

您好，只需将其添加到您的脚本中：

$(".choosewinner").click(function() {
  //highlight();
  var startTime = new Date().getTime();
  var interval = setInterval(function() {
    if (new Date().getTime() - startTime > 2000) {
      clearInterval(interval);
      $('.highlight').addClass('youwin');

            HilightWinner($('.highlight'));  // NEW LINE

            return;
    }
    highlight();
  }, 200);
});

// NEW FUNCITON
function HilightWinner(myDiv){
    if(myDiv){
        var td = $('td:first', myDiv.parents('tr'));
        td.addClass('youwin');
    }
}

【讨论】：