Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Question

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Welcome to my HTML table

<!DOCTYPE html>
<html>
<body>
<table>
<thead>
<th>Title1</th>
<th>Title2</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id=0 /></td>
<td>TEXT99</td>
</tr>
<tr>
<td><input type="checkbox" id=1 checked/></td>
<td>TEXT100</td>
</tr>
</tbody>
</table>

</body>
</html>

tap here for more details

My task is to parse all the rows in the table (after the page loads) and change the styling of the second column's text using jquery (as shown in the link)

For example, the table above should appear like so (with TEXTUSD crossed out)

I think we can adjust the css of an element with jquery's css method as follows

.css("text-decoration", "line-through")

However, I am unsure how to create a jquery code snippet that can loop through all the rows in the table and modify the css.

Do you think this is achievable with jquery?

Any assistance would be greatly valued !!!

javascript jquery html css

Answer 1

Answer №1

1. Starting the setup

If you want your script to execute after the page has loaded, you can use the .on() method with the load event.

Ref: .on() | jQuery API Documentation

2. Looping through specified elements:

To iterate over specific elements, you can utilize the .each() method along with certain CSS selectors like td > input, focusing directly on nested input elements within td elements (avoiding all nested input targeting and eliminating the need for an additional .find() method).

Ref: .each() | jQuery API Documentation

3. Validating the necessary condition:

To confirm if a particular element possesses the checked attribute, use a conditional statement such as if() to assess if the condition is true.
If it satisfies the condition, apply the required inline style using the .css() method inside the conditional block.

Ref: .css() | jQuery API Documentation

Code Illustration:

$(window).on('load', function(){
  
  $('td > input').each(function(){
    if($(this).attr('checked')) {
      $(this).parent().next().css('text-decoration', 'line-through');
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Header1</th>
    <th>Header2</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" id="text0" /></td>
      <td>TEXT1</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="text1" checked/></td>
      <td>TEXT2</td>
    </tr>
  </tbody>
</table>

Note:

id selectors are not valid if they start with a number (number/unit value), e.g: id="0", it must commence with a string, e.g: id="text0"
Enclose attribute values in quotation marks, e.g: id="text0"

Answer 2

1. Starting the setup

If you want your script to execute after the page has loaded, you can use the .on() method with the load event.

Ref: .on() | jQuery API Documentation

2. Looping through specified elements:

To iterate over specific elements, you can utilize the .each() method along with certain CSS selectors like td > input, focusing directly on nested input elements within td elements (avoiding all nested input targeting and eliminating the need for an additional .find() method).

Ref: .each() | jQuery API Documentation

3. Validating the necessary condition:

To confirm if a particular element possesses the checked attribute, use a conditional statement such as if() to assess if the condition is true.
If it satisfies the condition, apply the required inline style using the .css() method inside the conditional block.

Ref: .css() | jQuery API Documentation

Code Illustration:

$(window).on('load', function(){
  
  $('td > input').each(function(){
    if($(this).attr('checked')) {
      $(this).parent().next().css('text-decoration', 'line-through');
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Header1</th>
    <th>Header2</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" id="text0" /></td>
      <td>TEXT1</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="text1" checked/></td>
      <td>TEXT2</td>
    </tr>
  </tbody>
</table>

Note:

id selectors are not valid if they start with a number (number/unit value), e.g: id="0", it must commence with a string, e.g: id="text0"
Enclose attribute values in quotation marks, e.g: id="text0"

Answer 3

Answer №2

I have implemented this functionality using jQuery:

The goal is to strike out the text in the second column when the checkbox next to it is checked. Additionally, the text should be struck out if the checkbox is clicked by the user.

$(document).ready(function(){
 $('input:checkbox').on('change', function () {
        var td = $(this).parent().next('td');
        if (this.checked) {
           
            $(td).css('textDecoration', 'line-through');
        } else {
            $(td).css('textDecoration', 'none');
        }
    });
  var tdChecked = $('input[type=checkbox]:checked').parent().next('td');
  if ($('input[type=checkbox]:checked')) {
           
            $(tdChecked).css('textDecoration', 'line-through');
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table>
<thead>
<th>Header1</th>
<th>Header2</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id=0 /></td>
<td>TEXT1</td>
</tr>
<tr>
<td><input type="checkbox" id=1 checked/></td>
<td>TEXT2</td>
</tr>
</tbody>
</table>

</body>
</html>

Answer 4

I have implemented this functionality using jQuery:

The goal is to strike out the text in the second column when the checkbox next to it is checked. Additionally, the text should be struck out if the checkbox is clicked by the user.

$(document).ready(function(){
 $('input:checkbox').on('change', function () {
        var td = $(this).parent().next('td');
        if (this.checked) {
           
            $(td).css('textDecoration', 'line-through');
        } else {
            $(td).css('textDecoration', 'none');
        }
    });
  var tdChecked = $('input[type=checkbox]:checked').parent().next('td');
  if ($('input[type=checkbox]:checked')) {
           
            $(tdChecked).css('textDecoration', 'line-through');
            }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table>
<thead>
<th>Header1</th>
<th>Header2</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id=0 /></td>
<td>TEXT1</td>
</tr>
<tr>
<td><input type="checkbox" id=1 checked/></td>
<td>TEXT2</td>
</tr>
</tbody>
</table>

</body>
</html>

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

Answer №1

Answer №2

Similar questions

Utilizing AngularJS routes to load a specific URL when accessing a page for the first time

Is it possible to use a Jasmine spy on a fresh instance?

Having trouble viewing the header in devtools for $http requests?

How can I set a dropdown back to the first index in MVC?

The Bootstrap Grid Leaves Blank Spaces Unfilled

Having trouble with Mongoose's findOne method not functioning as expected

Implementing CSS Media Print, tables elegantly transition to a fresh page

Taking out the z-index from the transition code

Connecting the mat-progress bar to a specific project ID in a mat-table

Tips for removing an element from an array in a JSON structure using its unique identifier

Sequentially iterate through elements based on their Data attributes

Struggling with a CSS problem that jQuery can't seem

Are you in favor of side-to-side scrolling?

Is there a method available to selectively `cache` specific tabs?

Manipulating AngularJS with Sass variables

One approach could be utilizing either JavaScript object notation or jQuery code to establish class properties that are also classes in their own

Accordion featuring collapsible sections

The values of nested objects are not being passed as parameters from the AJAX call to the action method

Tips for enhancing the fluidity of animations after removing an item from a list

Selecting a specific section from a JSON data reception