通过单击表格单元格中的任意位置，勾选表格单元格中的复选框 [英] Tick a checkbox in a table cell by clicking anywhere in the table cell
本文介绍了通过单击表格单元格中的任意位置，勾选表格单元格中的复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图弄清楚如何做到这一点，但我无法在任何地方找到信息。基本上，我有一个表格，每个单元格包含一个复选框。我希望能够通过单击单元格内的任何位置来勾选复选框。我无法弄清楚如何去做，javascript对我来说是最好的解决方案，但我也可以使用jQuery。
I'm trying to figure out how to do this, but I can't find the information anywhere. Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell. I can't figure out how to do it, javascript would be the best type of solution for me but I could also use jQuery.
这是我的一排桌子我希望这样做。
Here is a row of my table I wish to do this in.
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkbox" name="free" value="mon09"></center></td>
<td><center><input type="checkbox" name="free" value="tue09"></center></td>
<td><center><input type="checkbox" name="free" value="wed09"></center></td>
<td><center><input type="checkbox" name="free" value="thu09"></center></td>
<td><center><input type="checkbox" name="free" value="fri09"></center></td>
</tr>
推荐答案
应该这样做：
<html>
<head>
<script type="text/javascript">
function onload() {
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].onclick =
function(td) {
return function() {
tdOnclick(td);
};
}(tds[i]);
}
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].onclick =
function(input){
return function() {
inputOnclick(input);
};
}(inputs[i]);
}
}
function tdOnclick(td) {
for(var i = 0; i < td.childNodes.length; i++) {
if(td.childNodes[i].nodeType == 1) {
if(td.childNodes[i].nodeName == "INPUT") {
if(td.childNodes[i].checked) {
td.childNodes[i].checked = false;
td.style.backgroundColor = "red";
} else {
td.childNodes[i].checked = true;
td.style.backgroundColor = "green";
}
} else {
tdOnclick(td.childNodes[i]);
}
}
}
}
function inputOnclick(input) {
input.checked = !input.checked;
return false;
}
</script>
</head>
<body onload="onload()">
<table>
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkbox" name="free" value="mon09"></center></td>
<td><center><input type="checkbox" name="free" value="tue09"></center></td>
<td><center><input type="checkbox" name="free" value="wed09"></center></td>
<td><center><input type="checkbox" name="free" value="thu09"></center></td>
<td><center><input type="checkbox" name="free" value="fri09"></center></td>
</tr>
</table>
</body>
</html>
这篇关于通过单击表格单元格中的任意位置，勾选表格单元格中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
