Строка выделения JQuery с флажком

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

Идентификатор таблицы с разметкой находится здесь:

<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>
12.12.2008 17:26:07
... почему вы продолжаете редактировать это?
Paolo Bergantino 18.03.2009 05:56:06
4 ОТВЕТА
РЕШЕНИЕ

Да, мой ответ тоже получил удар.

В любом случае, если вы используете asp.net, то имена искажаются (что-то вроде ctl100_Table), и вам нужно поместить это в jquery вместо Table.

Посмотрите на фактический HTML-код в браузере, чтобы получить имя, которое вам нужно использовать.

Вы можете попробовать использовать $ ("[id $ = Table]). Attr (" id "), чтобы получить искаженную версию.

2
12.12.2008 17:48:54

Первая проблема, которую я вижу, состоит в том, что нет элемента с идентификатором «Ввод таблицы», то есть такого, который соответствует «#Table input» - по крайней мере, в указанном вами HTML. Независимо от того, что идентификатор не может иметь пробел, так что проверьте это. Я буду рад помочь вам в дальнейшем, если вам нужно.

1
12.12.2008 17:35:56
$ ("# Таблица ввода") является допустимым селектором jQuery. В английском это означает «вернуть все входные элементы в объекте с идентификатором« Table ».»
cLFlaVA 12.12.2008 17:38:34
$ ("# Table input"): так, что он ищет, чтобы входной идентификатор был <input id = "Table", а не <table id = "Table"> <input>?
TStamper 12.12.2008 17:51:25
Нет ... он выбирает элементы ввода в элементе #Table. Взгляните на docs.jquery.com/Selectors/id#id и docs.jquery.com/Selectors/descendant#ancestordescendant .
cLFlaVA 12.12.2008 17:55:51
DOH! Должно быть, я спал, когда писал это.
rz. 12.12.2008 18:13:23

Грр, я только что закончил вводить свой ответ на этот вопрос, прежде чем он был удален. Вы собираетесь удалить и этот?


Я создал образец файла для проверки вашего сценария, и он работал как я ожидал. Я включил его ниже для вашей справки. При этом я предлагаю удалить любой код, не относящийся к конкретной функциональности, которую вы пытаетесь проработать во время теста, чтобы убедиться, что с другим кодом нет проблем с периферией. Кроме того, обязательно сделайте view> 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>
1
12.12.2008 17:35:58

В вашем коде JQuery нет ничего плохого - хотя было бы чище, если бы вы использовали toggleClass :

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

Я предполагаю, что либо ваш идентификатор неверен, либо вы нажимаете другую ошибку JavaScript до запуска этого фрагмента JQuery.

6
12.12.2008 17:38:24
toggleClass определенно сексуальнее.
cLFlaVA 12.12.2008 17:40:04