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背景颜色（切换类）

回答

相关问题