Emphasize the cell in the initial column to indicate the resulting or winning selection

Having trouble sharing my code directly, so please check out the JSFiddle link to see it in action. Once you click the "Click to Draw a Winner" button, a winner will be randomly selected after 10 seconds. The only issue is that currently only the winning ballot number is highlighted.

Any suggestions for highlighting the corresponding representative name of the winning ballot?

Check out my code on JSFiddle here

<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

javascripthtmlcss

Answer №1

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

Answer №2

Insert the following code snippet to emphasize the Name:

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

Answer №3

Hey there! Simply insert the following code snippet into your script:

$(".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 FUNCTION
function HilightWinner(myDiv){
    if(myDiv){
        var td = $('td:first', myDiv.parents('tr'));
        td.addClass('youwin');
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with rendering of Outlined select label in Material UI not functioning correctly

According to the demonstration, the position of the label for a Material UI outlined select input should be at the top border of the select box. https://i.sstatic.net/ue2ve.png However, in my application, it seems like the z-index of the label is causing ...

cssreactjsdrop-down-menumaterial-ui

Unable to separate the text by hyphen when inside a floated component

Here is the desired layout of nested elements as shown in the image below: https://i.sstatic.net/8TjCw.png However, the actual appearance of the elements is different than expected... https://i.sstatic.net/qV7fM.png I have experimented with various opt ...

csscss-float

Tips on maintaining the original text hues that were established using setForeground() when a QTableWidgetItem is picked

Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...

pythoncsspyside2qtablewidgetqtablewidgetitem

identifying HTTP requests originating from an embedded iframe

I have a unique scenario where there is an iframe on my page that calls a URL from a different domain. Occasionally, this URL will tunnel to a different URL than the one I specified. Unfortunately, due to cross-domain restrictions, I am unable to view the ...

javascriptjqueryhttpiframe

Creating a custom dynamic favicon and title in NextJS

Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...

javascripthtmlcssnext.jsseo

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

htmlcssbashstylesheet

Creating a multi-dimensional array in order to store multiple sets of data

To generate a multidimensional array similar to the example below: var serviceCoors = [ [50, 40], [50, 50], [50, 60], ]; We have elements with latitude and longitude data: <div data-latitude="10" data-longitude="20" clas ...

javascriptjquery

The page fades in as soon as it is loaded thanks to the "

I am interested in creating a unique effect where different classes fade in on page load. Check out this webpage for reference. The linked page showcases squares in various shades of grey and color, with the desire to have them fade in at different inter ...

cssclassfadeinonload

The scripts within the body tag are failing to load

After trying to embed angular into the body tag, I noticed that nothing is loading up. Upon inspecting the resources panel, I found that only files from the head are present. Moving all the scripts to the head section resolves the issue and everything load ...

javascriptangularjs

Responsive SVG curve line design

Trying to position the SVG line in the center with the SVG icon, without overlapping them. Need a responsive solution that adapts to the container width. Any suggestions involving canvas or after pseudo classes? The line and icon should always be centere ...

csscanvassvgdrawingline

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

htmlcssbackgroundcss-animationskeyframe

Using Python and Django to Populate Form Fields in a Model with values from an Imported JSON dataset

I am facing a challenge where I have a model form that stores all user inputs from form fields into the database as one entry. Additionally, I possess a JSON file with numerous JSON objects whose attributes correspond to the form field of the model. This ...

pythonhtmljsondjango

Exporting canvas as JSON and importing JSON back into canvas

Is there a way to prompt file explorer to open and allow me to select a save location for the JSON file of my canvas when I click the save button? Additionally, how can I load the canvas with the JSON file using the load button? Any guidance on getting s ...

javascriptjsonhtmlcanvas

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

Webpack is generating numerous files instead of consolidating them into one

While trying to build my app using webpack to the ./dist directory, I am encountering an issue where multiple files are being generated instead of just one. The contents of my ./dist folder are as follows: 657.main.js 657.main.js.LICENSE.txt 657.main.js.ma ...

javascriptnode.jsnpmwebpackweb-deployment

Can anyone identify the result produced by this line of code? Utilizing the $.get method to access "http://192.168.4.1:80/" with the parameter {pin:p}

Can anyone explain the output of this line of code? $.get("http://192.168.4.1:80/", {pin:p}); I understand that it is an Ajax code that sends data through a GET request, but I am trying to manually send the same data like this ".../pin:13" or "", however ...

javascriptajax

Organizing a JSON array into separate arrays

I have come across the following JSON array {"label":[{"name":"Government Schools", "datapoints":[{"year":"2007-2008","total":"1300"}, {"year":"2008-2009","total":"1280"}, {"year":"2009-2010","tot ...

javascriptphparraysjson

Display SVG at full size without any distortion

How can I make the SVG image 100% by 100% without scaling? I want the image to be centered on the page both horizontally and vertically. The challenge is that I also want to display the areas outside of the SVG artboard, so using CSS to center it won&apos ...

javascriptjqueryhtmlcsssvg

Card flipping functionality is not functional on Internet Explorer browsers (versions 11, 10, and below)

After coming across a tutorial on CSS3 transform by David Desandro, I tried implementing the code but unfortunately, it does not work in Internet Explorer... I noticed that clicking "flip" only results in Card 1 being displayed while card 2 remains hidden ...

cssinternet-explorertransforminternet-explorer-10internet-explorer-11

Using TypeScript to Infer Types in a Wrapper Function

When it comes to functions related to database operations, I have a handy utility/wrapper function that handles specific tasks. It takes a function fn of type Promise<PromiseReturnType<GENERIC>>, performs some preliminary actions (such as check ...

javascripttypescripttypescript-genericsstrong-typingtype-constraints