Kraus Posted May 29, 2018 Share Posted May 29, 2018 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. Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/ Share on other sites More sharing options...
denno020 Posted May 29, 2018 Share Posted May 29, 2018 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 Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/#findComment-1558648 Share on other sites More sharing options...
Barand Posted May 30, 2018 Share Posted May 30, 2018 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> Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/#findComment-1558652 Share on other sites More sharing options...
Kraus Posted May 30, 2018 Author Share Posted May 30, 2018 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. Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/#findComment-1558653 Share on other sites More sharing options...
Kraus Posted May 30, 2018 Author Share Posted May 30, 2018 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. Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/#findComment-1558654 Share on other sites More sharing options...
Kraus Posted June 6, 2018 Author Share Posted June 6, 2018 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. Quote Link to comment https://forums.phpfreaks.com/topic/307321-highlighting-the-values-on-assigned-table-only/#findComment-1558778 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.