Highlighting a Table Column with a Radio Button

Question

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet.

$("th").on("click", function () {
  var $currentTable = $(this).closest("table");
  var index = $(this).index();
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});

table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

javascript html css

Answer 1

Answer №1

When changing to radio-buttons, it is important to listen for the change event in order to determine when the button has been checked. Additionally, the use of the this keyword will refer to the button itself, not the th, requiring you to locate the correct th to obtain the accurate index.

Take a look at the example provided below:

$("input[name='test']").on("change", function () {
  var $currentTable = $(this).closest("table");
  var index = $(this).closest('th').index();
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});

table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

Answer 2

When changing to radio-buttons, it is important to listen for the change event in order to determine when the button has been checked. Additionally, the use of the this keyword will refer to the button itself, not the th, requiring you to locate the correct th to obtain the accurate index.

Take a look at the example provided below:

$("input[name='test']").on("change", function () {
  var $currentTable = $(this).closest("table");
  var index = $(this).closest('th').index();
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});

table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

Answer 3

Answer №2

Your issue lies in the following code snippet:

var index = $(this).index();

The current implementation retrieves the index value of the input element, instead of its parent element. To fix this, update the code to:

var index = $(this).parent().index();

It's worth noting that while you can use the click event, the change event is more suitable.

$("input[name='test']").on("change", function () { // You can also use clicks, but the change event is better for radio/checkbox inputs
  var $currentTable = $(this).closest("table");
  var index = $(this).parent().index(); // Get the parent's index
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});

table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

Answer 4

Your issue lies in the following code snippet:

var index = $(this).index();

The current implementation retrieves the index value of the input element, instead of its parent element. To fix this, update the code to:

var index = $(this).parent().index();

It's worth noting that while you can use the click event, the change event is more suitable.

$("input[name='test']").on("change", function () { // You can also use clicks, but the change event is better for radio/checkbox inputs
  var $currentTable = $(this).closest("table");
  var index = $(this).parent().index(); // Get the parent's index
  $currentTable.find("td").removeClass("selected");
  $currentTable.find("tr").each(function () {
    $(this).find("td").eq(index).addClass("selected");
  });
});

table tr td {
  width: 5em;
}
.selected {
  background-color: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="options" border="1" cellpadding="0" cellspace="0">
  <tr>
    <th><input type="radio" name="test" value="1" /></th>
    <th><input type="radio" name="test" value="2" /></th>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
  <tr>
    <td>col_1</td>
    <td>col_2</td>
  </tr>
</table>

Highlighting a Table Column with a Radio Button

Answer №1

Answer №2

Similar questions

What's the best way to ensure that the theme state remains persistent when navigating, refreshing, or revisiting a page in the browser?

Is it considered best practice to call the same function within itself in a function?

Having trouble retrieving the accurate height value for the UIWebView

"Encountered a Json error with a bizarre character causing the string

Express JS routing encounters 500 error following the submission of a form button

What is the process of dynamically creating a Javascript object?

Tips for efficiently resolving and compiling a bug within an NPM package, ensuring it is accessible to the build server

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

"Troubleshooting 3D Models not appearing correctly in Mapbox when using Three.js

Automatically submitting Ajax form upon loading the page

AngularJS - Regular Expression Error

Having trouble with the alias in commander.js not functioning as desired when using the "--help" option

Putting text on top of an image using Bootstrap

Having trouble with Vee-validate Basic example - undefined errors issue

Encountering problems when trying to mock values with Jest

The function dispatch is not recognized and will be removed from the database. An error will be generated indicating that dispatch is not a valid function

Creating an overlay button within various containing divs requires setting the position of the button

I encountered an issue while trying to integrate react-alert into my React application. An Uncaught Error was thrown, stating that objects are not valid as a React

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

Tips for managing both DOM manipulation and state changes at the same time in AngularJS