JavaScript：在點擊時切換td背景顏色（切換類）

我試圖創建一個複選框輸入表，其中隱藏了實際的複選框，並用可點擊的標籤替換。因此，我想在點擊時更改表格單元格的背景顏色。（理想情況下，它會直接綁定到複選框狀態，但我無法弄清楚。）JavaScript：在點擊時切換td背景顏色（切換類）

我不知道爲什麼我的代碼不起作用。

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

來源

2016-11-01 D Highland

什麼'$（togglechecked（）{'怎麼辦呢？ – j08691

切換從藍色背景色爲紅色（撥動「選中」類和關閉） –

這是不正確的語法。你可能想要使它成爲一個函數來調用，比如'function toggleChecked（）{...'或者像$（'＃workingSetTable td'）這樣的事件處理程序......' – j08691

在JS撥弄所以它不是加載您沒有選擇了jQuery，和w無論你做了什麼，他都不會工作。

您還有更多的語法比你需要。要添加一個點擊處理程序，你不需要HTML中的任何東西。你也不需要命名函數。

https://jsfiddle.net/w45antdo/

這是你所需要的所有的jQuery（除了檢查按鈕，你不需要做，除非你提交此作爲表單數據到另一頁）

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

如果這是比的jsfiddle其他地方，你也應該告訴它加載了jQuery的HTML完成後，通常通過做

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

來源

2016-11-01 19:11:27 stackers

這裏有一個快速和骯髒例如 - 我使用這個（用BIT更多的鐘聲和哨聲）來創建一個時間表 - 協調事物的開/關班次。這確實複選框的事情，並將數據發送到後臺的PHP腳本，更新數據庫，等等，等等

$('.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>

來源

2016-11-01 19:12:45 junkfoodjunkie

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

上面的小提琴說明如何執行使用標籤和隱藏的複選框。請注意，我使用visiblity:hidden;而不是display:none;，因爲某些瀏覽器（Safari）不會提交未顯示的表單控件。

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

來源

2016-11-01 19:18:04 bassxzero

這正是我正在尋找的。非常感謝。 –

我真的不明白你想要什麼。

但我想出這個小提琴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>

來源

2016-11-01 19:37:22

這裏有一個例子是完全沒有的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>

來源

2016-11-02 11:17:40 junkfoodjunkie

JavaScript：在點擊時切換td背景顏色（切換類）

回答

相關問題