ハイライトされたセルの最初の列のハイライトセル

Question

ここに投稿する方法がわからないので、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> 

AB50.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

Answer 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); 
}); 

Answer 2

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

Answer 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'); 
    } 
}