2

The purpose of my codes is to change the <td> portion of the color and the font inside the table when I check/unchecked the box, but it didn't work as intended with the code I got from here.

input[type=checkbox] + td {
    background-color: #FFFFFF;
    color:#000000
} 

input[type=checkbox]:checked + td {
    background-color: #00447C;
    color:#FFFFFF;
} 
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

It works in the source so I am confused regarding this.

Improve this question
4
  • 1
    when adding code to OP use <> to create a demo Commented Feb 15, 2017 at 3:01
  • sorry garuda, and thank you. Commented Feb 15, 2017 at 3:02
  • you want jquery solution or css only? Commented Feb 15, 2017 at 3:06
  • both, sorry. andd it seem like it requires both if I am not allowed to alter my html codes Commented Feb 15, 2017 at 4:56

4 Answers 4

Reset to default
1

With jquery you can do something like this:

var checkboxes = $("input[type='checkbox']");

function checkbox_function()
{
/*
  var tr = $(this).parent().parent();
  if ($(tr).hasClass('checked'))
  {
    $(tr).removeClass("checked");
  }
  else
  {
    $(tr).addClass("checked");
  }
*/
  var parent = $(this).parent();
  if ($(this).is(":checked"))
  {
    $(parent).siblings().addClass("checked");
  }
  else
  {
    $(parent).siblings().removeClass("checked");
  }
  
  
}

$.each(checkboxes, function(index, item) {
    $(item).change(checkbox_function);
  });
tr.unchecked {
    background-color: #FFFFFF;
    color:#000000
} 

tr.checked {
    background-color: #00447C;
    color:#FFFFFF;
}

td{
    background-color: #FFFFFF;
    color:#000000  
}

td.checked{
    background-color: #00447C;
    color:#FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

What this does is get all the checkboxes and then puts a change listener onto them.

(Edit to your liking).

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

is it fine if i change the tr to td as it may conflict my header css codes
It is weird because the code is working i your snippet, but it doesnt work on mine, I will have to look at it again.
If you want it to only go with the td, I can change the code again. It was really just a lazy example. If you don't mind the tr, simply add a class to it so that it doesn't interfere with other tr stuff that doesn't have the class
I as told to not touch my html at all. so I just replaced all the tr as td in my jquery and css
I changed the answer so it only affects the tds (subsequent).
|
1

The + selector in CSS selects an element adjacent to the preceding selector. So input + td would select the <td> in the following example:

<input />
<td></td>

But not in this one:

<div>
    <input />
</div>
<td></td>

Thus, your CSS doesn't point to an existing <td> element in your markup.

EDIT: One (example) workaround to this would be to omit your <td> tags, since all standard-compliant browsers have implemented tables without <td>s.

Improve this answer

4 Comments

then do i have to use + #table.td instead?
wait, but I've to use input because of my checkbox.
Sadly, you can't point to a parent/ancestor element with CSS. Your only option would be to change your markup, or to use JS. Pure CSS can't accomplish what you want with that exact HTML (to my knowledge).
that explans why they would let me finally touch my JS as well... thank you
0

the plus sign in css means :

Select and style every

element that are placed immediately after elements for div + p { background:'#fff'; }

That mean in your case it will select any td that comes right after input[..]

Improve this answer

Comments

0

The plus (+) refers to siblings, but your checkbox is a child of the cell, so you should use chevron (>) or space ( ) instead.

http://techbrij.com/css-selector-adjacent-child-sibling

However, you can't style the parent based on the child, only the other way round. So you might have to resort to javascript to add/remove a class from the cell.

Improve this answer

1 Comment

The > selector points to a direct child of the preceding selector. Input elements cannot have child elements. EDIT: (referring to a previous revision of this answer)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.