Jump to content

Highlighting the values on assigned table only


Kraus

Recommended Posts

I have some html tables on the page, and some checkboxes whose values to be highlighted on the assigned table. The example code can be seen here : https://jsfiddle.net/9kq5djwr/

What I need to do is only the assigned table values to be highlighted by that specific checkbox group. So when first checkbox group is clicked, values on table1 will be highlighted. and it goes on like that. The HTML tables have the same values, only their table id is unique and different.

This is just an example fiddle, there will be more checkbox groups and tables. I seek a way to do this automatically, without any manual change every time. since the checkbox values will be updated regularly. Can I get any help on this? please.

Link to comment
Share on other sites

A quick and slightly dirty way you could achieve this is by wrapping your checkbox groups in a single element (div for example) and wrapping your tables in a single element also (but not the same one). So it would be something like this:

<div class="checkbox-groups">
  <!-- All of your checkbox groups -->
</div>
<div class="tables">
  <!-- All of your tables -->
</div>

Then, you can use jQuery's index() function to get the index of the group that contains the checkbox that is activated, and then find the corresponding nth-child() in your tables div. Something like the following pseudo code

$('input[type="checkbox"]').on('click', function(e) {
  var $checkbox = $(e.target);
  var index = $checkbox.index();

  // Find corresponding <table> in the .tables element
  var $table = $('.tables').find('table:nth-child('+index+')');
  // Loop through table cells to determine which should be highlighted
})

I have written that using ES5, as your Fiddle is also written using ES5, but it could be cleaned up a but with arrow functions and template literals from ES6, should you happen to have access to a build tool or don't care about support for IE.

If you can have a crack at implementing something like that, and post back with results, I'll be happy to help further with your solution

Link to comment
Share on other sites

Do you mean something like this?

SAMPLE.HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<meta name="creation-date" content="05/30/2018">
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        
        $(".cbox").click( function() {
            var id = $(this).val();
            if ( $(this).prop("checked")) {
                $("table#"+id).css("background-color", "#FCC");
            }
            else {
                $("table#"+id).css("background-color", "#FFF");
            }
        })
    })
</script>
<style type="text/css">
    div.cb {
        width: 100px;
        text-align: center;
        display: inline-block;
    }
    
    div#tables {
        margin-top: 10px;
        border-top: 1px solid gray;
        padding-top: 10px;
    }
    
    table {
        width: 25%;
        display: inline-block;
        border-collapse: collapse;
        margin-right: 25px;
        float: left;
    }
    
    td {text-align: center;}
</style>
</head>
<body>
<div class='cb'><input type="checkbox" class='cbox' name="cb[1]" id="cb1" value="1"> 1</div>
<div class='cb'><input type="checkbox" class='cbox' name="cb[2]" id="cb2" value="2"> 2</div>
<div class='cb'><input type="checkbox" class='cbox' name="cb[3]" id="cb3" value="3"> 3</div>

<div id='tables'>
    <table id='1' border='1'>
    <caption>Table: 1</caption>
        <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
        <tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    </table>
    
    <table id='2' border='1'>
    <caption>Table: 2</caption>
        <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
        <tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    </table>
    
    <table id='3' border='1'>
    <caption>Table: 3</caption>
        <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
        <tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
        <tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    </table>
    <br>
</div>
</body>
</html>

 

Link to comment
Share on other sites

Thanks, denno020. For your first suggestion, both sides, all checkboxes and all tables are in different divs.And I aso applied this on the fiddle now too. I don't know how to apply your pseudo code in this case. IE is not really important in this case, so I prefer to stick with ES5.

I really need (if possible) with minimum modofication to the checkbox and table structure. Tables have unique table ids, but checkboxes (select all) don't have any unique identifier.

Link to comment
Share on other sites

Thanks, Barand. Your code works for a table. It highlights the whole selected table. I need to highlight only the selected values (with select all) to highlight on the assigned table.

I'd really need the least modification to the checkbox and table structure if possible.

Link to comment
Share on other sites

On 5/30/2018 at 12:19 AM, denno020 said:

A quick and slightly dirty way you could achieve this is by wrapping your checkbox groups in a single element (div for example) and wrapping your tables in a single element also (but not the same one). So it would be something like this:


<div class="checkbox-groups">
  <!-- All of your checkbox groups -->
</div>
<div class="tables">
  <!-- All of your tables -->
</div>

Then, you can use jQuery's index() function to get the index of the group that contains the checkbox that is activated, and then find the corresponding nth-child() in your tables div. Something like the following pseudo code


$('input[type="checkbox"]').on('click', function(e) {
  var $checkbox = $(e.target);
  var index = $checkbox.index();

  // Find corresponding <table> in the .tables element
  var $table = $('.tables').find('table:nth-child('+index+')');
  // Loop through table cells to determine which should be highlighted
})

I have written that using ES5, as your Fiddle is also written using ES5, but it could be cleaned up a but with arrow functions and template literals from ES6, should you happen to have access to a build tool or don't care about support for IE.

If you can have a crack at implementing something like that, and post back with results, I'll be happy to help further with your solution

@denno020, This is what I have now. I can select the individual tables and highlight them. https://jsfiddle.net/wd9v8e7t/

I need help with "SelectAll" for all tables. Can you help me with this, please? thanks.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.