使用复选框单击 JQuery 突出显示行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/363503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery highlight row with checkbox click
提问by TStamper
$(document).ready(function(){
$(".txtDate").datepicker({ showOn: "both",
buttonImage: "library/ui/datepicker/img/calendar2.gif", dateFormat: "yy/mm/dd", buttonImageOnly: true });
//added this checkbox click for something I given earlier
$("#Table input").click(function() {
if ($(this).attr("checked") == true)
{
$(this).parent().parent().addClass("highlight");
}
else
{
$(this).parent().parent().removeClass("highlight");
}
});
});
I have a checkbox control for each row that I add dynamically in code behind
我在后面的代码中动态添加的每一行都有一个复选框控件
for( int i=0; i< data.count;i++){
HtmlTableCell CheckCell = new HtmlTableCell();
CheckBox Check = new CheckBox();
CheckCell.Controls.Add(Check);
row.Cells.Add(CheckCell);
Table.Rows.Add(row);
}
table id with markup is here:
带标记的表 ID 在这里：
<table id="Table" runat="server" width="100%" cellspacing="5" border="1">
<colgroup width="3%"></colgroup>
<colgroup width="15%"></colgroup>
<colgroup width="20%"></colgroup>
<colgroup width="15%"></colgroup>
<colgroup width="47%"></colgroup>
<thead>
<tr>
<th id="CheckBox" runat="server"><input type="checkbox" id="CheckBox1" name="CheckBox" runat="server" /></th>
<th id="Type" runat="server"></th>
<th id="Category" runat="server"></th>
<th id="DateTime" runat="server"></th>
<th id="Description" runat="server"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
采纳答案by Steve Davies
Yea - my answer just got zapped too.
是的 - 我的回答也被打断了。
Anyway, if you are using asp.net then the names get mangled ( to something like ctl100_Table ) and you need to put this into the jquery instead of Table.
无论如何，如果您使用的是 asp.net，那么名称会被破坏（类似于 ctl100_Table ），您需要将其放入 jquery 而不是 Table。
Look at the actual rendered html in the browser to get the name you need to use.
在浏览器中查看实际呈现的 html 以获取您需要使用的名称。
You can try using $("[id$=Table]).attr("id") to get the mangled version.
您可以尝试使用 $("[id$=Table]).attr("id") 来获取损坏的版本。
回答by Mark Brackett
There's nothing wrong with your JQuery code - though it'd be cleaner if you used toggleClass:
您的 JQuery 代码没有任何问题-尽管使用toggleClass会更清晰：
$('#Table INPUT').click(function() {
$(this).parent().parent().toggleClass('highlight');
});
I'd guess either your id's are wrong - or you're hitting another JavaScript error before that snippet of JQuery runs.
我猜要么你的 id 是错误的——要么你在 JQuery 的片段运行之前遇到了另一个 JavaScript 错误。
回答by rz.
The first problem that I see is that there is no element with id "Table input" ie that matches "#Table input" -- at least not in the html you provided. No matter what, the id can't have a space so check that. I'll be glad to help you further if you need.
我看到的第一个问题是，没有 id 为“Table input”的元素，即匹配“#Table input”——至少在您提供的 html 中没有。无论如何，id 不能有空格，所以检查一下。如果您需要，我很乐意为您提供进一步帮助。
回答by cLFlaVA
Grr, I had just finished typing up my response to this question before it was deleted. Are you going to delete this one as well?
Grr，我刚刚完成了对这个问题的回答，然后才被删除。你也要删除这个吗？
I created a sample file to test your scenario and it worked as I expected. I've included it below for your reference. That being said, I suggest removing any code not related to the specific functionality you're trying to work out during your test to ensure there are no peripheral issues with other code. Also, be sure to do a view > source to make sure your table really does have that ID, and that your checkboxes and HTML are being properly and validly rendered. If you have broken HTML, your jQuery won't work.
我创建了一个示例文件来测试您的场景，它按我的预期工作。我已将其包含在下面供您参考。话虽如此，我建议删除与您在测试期间尝试解决的特定功能无关的任何代码，以确保其他代码没有外围问题。此外，请务必执行 view > source 以确保您的表格确实具有该 ID，并且您的复选框和 HTML 正在正确且有效地呈现。如果您破坏了 HTML，您的 jQuery 将无法工作。
Here's the sample file I used. What browser are you testing in?
这是我使用的示例文件。你在什么浏览器上测试？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
<style type="text/css">
.highlight {
background-color: yellow;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#Table input").click(function() {
if ($(this).attr("checked") == true) {
$(this).parent().parent().addClass("highlight");
} else {
$(this).parent().parent().removeClass("highlight");
}
});
});
//-->
</script>
</head>
<body>
<form name="f">
<table id="Table" border="1"><tr>
<td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
<td>Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
<td>Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
<td>Click me</td>
</tr></table>
</form>
</body>
</html>
