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

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

3 голосов
/ 12 декабря 2008 
$(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>

Ответы [ 4 ]

6 голосов
/ 12 декабря 2008

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

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

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

2 голосов
/ 12 декабря 2008

Да - мой ответ только что получил удар.

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

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

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

1 голос
/ 12 декабря 2008

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...