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

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

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>

источник

2008-12-12 TStamper

... почему вы продолжаете редактировать это? – 2009-03-18 05:56:06

Yea - мой ответ тоже был забит.

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

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

Вы можете попробовать использовать $ ("[идентификатор $ = Таблицу]). Атр (" ID "), чтобы получить искаженную версию.

источник

2008-12-12 17:48:54

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

источник

2008-12-12 17:35:56

$ (" # Таблица input ") является допустимым селектором jQuery. На английском языке это означает« вернуть все элементы ввода внутри объекта с идентификатором «Таблица». – cLFlaVA 2008-12-12 17:38:34

$ («# Table input»): так, что он ищет, это входной идентификатор ? – TStamper 2008-12-12 17:51:25

Nope ... он выбирает входные элементы в элементе #Table. Взгляните на http://docs.jquery.com/Selectors/id#id и http://docs.jquery.com/Selectors/descendant#ancestordescendant. – cLFlaVA 2008-12-12 17:55:51

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

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

источник

2008-12-12 17:35:58 cLFlaVA

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

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

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

источник

2008-12-12 17:38:24

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

ответ

Смежные вопросы