JavaScript: td Hintergrundfarbe beim Klicken ändern (Klasse umschalten)

Ich versuche eine Tabelle mit Checkbox-Eingaben zu erstellen, wobei die tatsächlichen Kontrollkästchen ausgeblendet sind und durch anklickbare Labels ersetzt werden. Daher möchte ich die Hintergrundfarbe der Tabellenzellen beim Klicken ändern. (Im Idealfall wäre es direkt an den Checkbox-Status gebunden, aber ich konnte das nicht herausfinden.)JavaScript: td Hintergrundfarbe beim Klicken ändern (Klasse umschalten)

Ich habe keine Ahnung, warum mein Code nicht funktioniert.

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

Quelle

2016-11-01 D Highland

Was ist '$ (Togglechecked() {' tun soll? – j08691

die Farbe Hintergrund Umschalten von blau bis rot (Umstellen der "geprüft" Klasse und Ausschalten) –

Das falsche Syntax ist. Wahrscheinlich möchten Sie entweder eine Funktion zum Aufruf machen, wie 'function toggleChecked() {...' oder einen Event-Handler wie '$ ('# workingSetTable td') ...' – j08691

Auf JS Geige Sie wählen JQuery nicht so es geladen wasnt, und W hätte nicht funktionieren können, egal was du getan hast.

Sie haben auch mehr Syntax als Sie benötigen. Um einen Klick-Handler hinzuzufügen, brauchst du nichts im HTML. Sie brauchen auch keine benannte Funktion.

https://jsfiddle.net/w45antdo/

dies ist umso jquery Sie brauchen (neben den Knopf von der Überprüfung, die Sie tun müssen, nicht, wenn Sie diese als Formulardaten auf eine andere Seite sind die Einreichung) Wenn

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

das ist irgendwo anders als jsfiddle, sollten Sie auch sagen, es die jquery zu laden, nachdem die hTML gemacht wird, in der Regel durch

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

Quelle

2016-11-01 19:11:27 stackers

Hier ist eine schnelle und schmutzig machen Beispiel - Ich benutze dies (mit einem BIT mehr Schnickschnack), um An/Aus-Verschiebungen für ein Arbeitszeittabellen-Koordinations-Ding zu erzeugen. Dies macht die Checkbox Sache, und sendet Daten an einen Hintergrund PHP-Skript, das die Datenbank aktualisiert, etc. etc.

$('.shifts_clickable td').on('click',function() { 
 
\t \t \t \t \t \t \t if ($(this).hasClass('registered_active')) { 
 
\t \t \t \t \t \t \t \t $(this).removeClass('registered_active').addClass('not_active'); 
 
\t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t $(this).removeClass('not_active').addClass('registered_active'); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t })

table { 
 
    border-collapse: initial; 
 
    border-spacing: 0; 
 
    margin: 1em auto; 
 
    width: 98%; 
 
} 
 
thead, th { 
 
\t background: $header-background; 
 
\t color: $header-color; 
 
\t text-align: center; 
 
\t font-family: 'open_sans_semibold'; 
 
\t font-size: 1em; 
 
} 
 
td { 
 
\t border: 0.1em solid #9a9a9a; 
 
\t color: $hilight-contrast; 
 
\t font-size: 0.9em; 
 
} 
 
.registered_active { 
 
\t background-color: green; 
 
} 
 
.not_active { 
 
\t background-color: rgb(220,160,50); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
\t \t \t \t \t \t \t \t <table> 
 
\t \t \t \t \t \t \t \t \t <thead> 
 
\t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t <th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr> 
 
\t \t \t \t \t \t \t \t \t </thead> 
 
\t \t \t \t \t \t \t \t \t <tbody><tr class="shifts_clickable"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t </li>

Quelle

2016-11-01 19:12:45 junkfoodjunkie

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

Die Geige oben zeigt, wie die Verwendung zu tun Etiketten und versteckte Kontrollkästchen. Beachten Sie, dass ich visiblity:hidden; anstelle von display:none; verwende, da einige Browser (Safari) keine Formularsteuerelemente übergeben, die nicht angezeigt werden.

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')); 
});

Quelle

2016-11-01 19:18:04 bassxzero

Genau das habe ich gesucht. Ich danke dir sehr. –

ich nicht wirklich verstehen, was Sie wollen.

Aber ich komme mit dieser Geige 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>

Quelle

2016-11-01 19:37:22

Hier ein Beispiel ist ganz ohne 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>

Quelle

2016-11-02 11:17:40 junkfoodjunkie

JavaScript: td Hintergrundfarbe beim Klicken ändern (Klasse umschalten)

Antwort

Verwandte Themen