CODEWITHSUNDEEP
javascripthtml
D Highland
D Highland

Reputation: 11

JavaScript: change td background color on click (toggling class)

I'm trying to create a table of checkbox inputs with the actual check boxes hidden and replaced with clickable labels. As such, I want to change the background color of the table cells on click. (Ideally it'd be tied directly to the checkbox state, but I couldn't figure that out.)

I have no idea why my code doesn't work.

HTML:

<table id="workingSetTable" border="1">
<tr>
<td onclick="togglechecked()" class="checked">
  <div>
    <input type="checkbox" checked="checked" />
  </div>
</td>
</tr>

CSS:

input {
    display: none;
}

td {
    background-color: red;
    width: 100px;
    height: 100px;
}

.checked {
    background-color: blue;
}

JS:

$(togglechecked() {
    $("td").click(togglechecked() {
        $(this).toggleClass("checked");
    });
});

Fiddle

Upvotes: 1

Views: 1977

Answers (5)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

Here's an example entirely without javascript.

table td {
  border: 1px solid black;
  min-width: 5em;
}
table input[type=checkbox] {
  display: none;
}
label {
  width: 100%;
  height: 100%;
  display: block;
}
input[type=checkbox]:checked + label {
  background: green;
}
  
<table>
  <tr>
    <td><input name="input_1_1" id="input_1_1" type="checkbox"><label for="input_1_1">&nbsp;</label></td>
    <td><input name="input_1_2" id="input_1_2" type="checkbox"><label for="input_1_2">&nbsp;</label></td>
    <td><input name="input_1_3" id="input_1_3" type="checkbox"><label for="input_1_3">&nbsp;</label></td>
  </tr>
</table>

Upvotes: 0

Alexandre V.
Alexandre V.

Reputation: 116

I don't really understand what you want.

But I come up with this fiddle https://jsfiddle.net/avialle/zykc6gz9/6/

$(function() {
  $('input').click(function (evt) {
    $(evt.target).parent().toggleClass('checked');
  });
});
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    border:1px solid black;
    padding:20px;
    background-color:white;
}
td.checked {
    background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="checked"><input type="checkbox" checked=""></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td class="checked"><input type="checkbox" checked=""></td>
  </tr>
</table>

Upvotes: 0

bassxzero
bassxzero

Reputation: 5041

https://jsbin.com/teyoziwini/edit?html,css,js,output

The fiddle above shows how to do use labels and hidden check boxes. Note that i'm using visiblity:hidden; instead of display:none; because some browsers (Safari) won't submit form controls that arent' displayed.

HTML

  <table id="workingSetTable" border="1">
    <tbody>
      <tr>
        <td >
          <label class="checked">
            <input type="checkbox" checked="checked" />
          </label>
        </td>
      </tr>
    </tbody>
  </table>

CSS

.checked {
    background-color: blue;
}

td label {
    display: inline-block;
    position: relative;
    background-color: red;
    width: 100px;
    height: 100px;  
}

td label.checked {
     background-color: blue;
}

td label input {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;    
}

JQuery

$(document).on('change', 'label input', function(){
  var $this = $(this);  
  $this.closest('label').toggleClass('checked', $this.prop('checked'));  
});

Upvotes: 0

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

Here's a quick and dirty example - I use this (with a BIT more bells and whistles) to create on/off shifts for a timesheet-coordination-thing. This does the checkbox thing, and sends data to a background PHP-script that updated the database, etc. etc.

$('.shifts_clickable td').on('click',function() {
							if ($(this).hasClass('registered_active')) {
								$(this).removeClass('registered_active').addClass('not_active');
							} else {
								$(this).removeClass('not_active').addClass('registered_active');
							}
						})
table {
  border-collapse: initial;
  border-spacing: 0;
  margin: 1em auto;
  width: 98%;
 }
thead, th {
	background: $header-background;
	color: $header-color;
	text-align: center;
	font-family: 'open_sans_semibold';
	font-size: 1em;
}
td {
	border: 0.1em solid #9a9a9a;
	color: $hilight-contrast;
	font-size: 0.9em;
}
.registered_active {
	background-color: green;
}
.not_active {
	background-color: rgb(220,160,50);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
								<table>
									<thead>
										<tr>
											<th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
									</thead>
									<tbody><tr class="shifts_clickable">
											<td class="shift_1_0_heading center"><b>Shift 0</b></td><td id="bar_1__1__0__1" class=" pointer not_active"></td><td id="bar_1__1__0__2" class=" pointer not_active"></td><td id="bar_1__1__0__3" class=" pointer not_active"></td><td id="bar_1__1__0__4" class=" pointer not_active"></td><td id="bar_1__1__0__5" class=" pointer not_active"></td><td id="bar_1__1__0__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_1_heading center"><b>Shift 1</b></td><td id="bar_1__1__1__1" class=" pointer not_active"></td><td id="bar_1__1__1__2" class=" pointer not_active"></td><td id="bar_1__1__1__3" class=" pointer not_active"></td><td id="bar_1__1__1__4" class=" pointer not_active"></td><td id="bar_1__1__1__5" class=" pointer not_active"></td><td id="bar_1__1__1__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_2_heading center"><b>Shift 2</b></td><td id="bar_1__1__2__1" class=" pointer not_active"></td><td id="bar_1__1__2__2" class=" pointer not_active"></td><td id="bar_1__1__2__3" class=" pointer not_active"></td><td id="bar_1__1__2__4" class=" pointer not_active"></td><td id="bar_1__1__2__5" class=" pointer not_active"></td><td id="bar_1__1__2__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_3_heading center"><b>Shift 3</b></td><td id="bar_1__1__3__1" class=" pointer not_active"></td><td id="bar_1__1__3__2" class=" pointer not_active"></td><td id="bar_1__1__3__3" class=" pointer not_active"></td><td id="bar_1__1__3__4" class=" pointer not_active"></td><td id="bar_1__1__3__5" class=" pointer not_active"></td><td id="bar_1__1__3__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_4_heading center"><b>Shift 4</b></td><td id="bar_1__1__4__1" class=" pointer not_active"></td><td id="bar_1__1__4__2" class=" pointer not_active"></td><td id="bar_1__1__4__3" class=" pointer not_active"></td><td id="bar_1__1__4__4" class=" pointer not_active"></td><td id="bar_1__1__4__5" class=" pointer not_active"></td><td id="bar_1__1__4__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_5_heading center"><b>Shift 5</b></td><td id="bar_1__1__5__1" class=" pointer not_active"></td><td id="bar_1__1__5__2" class=" pointer not_active"></td><td id="bar_1__1__5__3" class=" pointer not_active"></td><td id="bar_1__1__5__4" class=" pointer not_active"></td><td id="bar_1__1__5__5" class=" pointer not_active"></td><td id="bar_1__1__5__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
											<td class="shift_1_6_heading center"><b>Shift 6</b></td><td id="bar_1__1__6__1" class=" pointer not_active"></td><td id="bar_1__1__6__2" class=" pointer not_active"></td><td id="bar_1__1__6__3" class=" pointer not_active"></td><td id="bar_1__1__6__4" class=" pointer not_active"></td><td id="bar_1__1__6__5" class=" pointer not_active"></td><td id="bar_1__1__6__6" class=" pointer not_active"></td></tr></tbody>
								</table>
								<label for="checkallshifts_1" class="button secondary_button center">Check all shifts for Bar 1</label><input id="checkallshifts_1" name="checkallshifts_1" class="button secondary_button ui-corner-all" type="checkbox">
								</li>

Upvotes: 1

stackers
stackers

Reputation: 3299

On JS fiddle you didn't select Jquery so it wasnt loaded, and wouldnt have worked no matter what you did.

You also have more syntax than you need. To add a click handler you dont need anything in the html. You dont need a named function either.

https://jsfiddle.net/w45antdo/

this is all the jquery you need (aside from checking the button, which you dont need to do unless you're submitting this as form data to another page)

$("td").click(function () {
      $(this).toggleClass("checked");
});

If this is somewhere other than jsfiddle, you also should tell it to load the jquery after the html is done, usually by doing

$( document ).ready(function() {
    console.log( "ready!" );
});

Upvotes: 1

Related Questions