Help with table coloring please

JavaScript
1

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/1oadc3fb/

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.

2

So things to think about:

How can you tell which checkbox group has been clicked?
What’s the link between that checkbox group and the tables?

3

thanks, m_hutley. Tables have a unique table id. but checkboxes dont have it in the current structure. if it is necessary, I can change checkbox structure a little. would that be helpful?

4

This is not going to be the right answer but just for fun I had a go as its quiet around here.:slight_smile:

I’m sure the code could be cut in half and simplified when @m_hutley gets back :slight_smile:

I added a data attribute to the parent form of each to identify the tables uniquely rather than relying on an index which might change.

e.g.

 <form id="form1" data-checktable="tb1"
...
 <form id="form2" data-checktable="tb2"
...
etc..

You should probably change your custom attributes to data attributes to be on the safe side.

i.e. dbval="5" should really be data-dbval="5" to be valid.

An added improvement would be to toggle the ‘all’ checkbox on automatically when all of the others are checked.

Hope its a little help but I would wait for the right answer to come along :slight_smile:

1 Like
5

I added that into a new fork here:

The code is ripe for optimisation now as there is a lot of duplication that could be reduced.

1 Like
6

PaulOB, I tried your code. and it does the job. thanks a lot. if there is an easier alternative, I am also open for this.

I have an additional question if you don’t mind. When I insert checked="checked" to <input type='checkbox' name='SelectAll' class='all' />, so that it’d be checked & highlighted by default, it didn’t work even though it was checked by default.

How can I make it work by default? it doesn’t have to be checked by default, if there is a way to select “selectall” checkbox, it’d be fine too. thanks.

7

You would need to run a check to see if the element has been checked and then run the code accordingly.

I’ve added it to this new fork.

However, we are now doing the same thing many times so this really needs breaking down and optimising so hopefully one of the js experts here can tidy it up for me :slight_smile:

1 Like
8

Thanks a lot, PaulOB.

9

Although checked="checked" is allowed
https://www.w3.org/TR/2010/WD-html5-20101019/common-microsyntaxes.html#boolean-attributes
(note, although it’s a boolean, checked=“true” is not allowed)
I have had much less problem by simply having or not having the attribute in its allowed “no value” form. i.e.
<input .... checked .... >

2 Likes
10

Challenge accepted :smiley:

I got it down to 25 lines, plus checking pre-checking individual checkboxes now works as well (see first table) :slight_smile:

2 Likes
11

Nice one Remon. Good to have you back posting again :slight_smile:

1 Like
12

Thanks Paul. It’s good to be back :slight_smile:

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.