Question

$(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");
        }
    });
});

我在

后面的代码中动态添加的每一行都有一个复选框控件

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

带有标记的表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>

Answer 1

您的JQuery代码没有任何问题 - 尽管如果您使用toggleClass它会更干净：

 $('#Table INPUT').click(function() {
     $(this).parent().parent().toggleClass('highlight');
 });

我猜你的id是错的 - 或者你在JQuery片段运行之前遇到了另一个JavaScript错误。

Answer 2

是的 - 我的答案也被摧毁了。

无论如何，如果您使用的是asp.net，那么名称会被破坏（类似于ctl100_Table），您需要将其放入jquery而不是Table。

查看浏览器中实际呈现的html以获取您需要使用的名称。

您可以尝试使用$（“[id $ = Table]）。attr（”id“）来获取受损版本。

Answer 3

我看到的第一个问题是没有带有“表输入”的元素，即匹配“#Table输入” - 至少不在你提供的html中。无论如何，id都没有空间所以检查一下。如果您需要，我很乐意帮助您。

Answer 4

Grr，我刚刚在删除之前完成了对此问题的回复。你打算删除这个吗？

我创建了一个示例文件来测试您的场景，它按预期工作。我已将它包含在下面供您参考。话虽这么说，我建议删除任何与您在测试期间尝试解决的特定功能无关的代码，以确保其他代码没有外围问题。此外，请务必进行视图＆gt; source以确保您的表确实具有该ID，并且您的复选框和HTML正确且有效地呈现。如果您破坏了HTML，那么您的jQuery将无效。

这是我使用的示例文件。您正在测试哪种浏览器？

<!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>

JQuery突出显示行与复选框单击

4 个答案: