Geek Answers Handbook

Click jquery highlight string

$(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 for each line that I dynamically add to the code for

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

the identifier of the table with markup is here:

 <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>
+3
source share
4 answers

Yes, my answer was also clogged.

In any case, if you use asp.net, then the names become mutilated (e.g. ctl100_Table) and you need to put them in jquery instead of a table.

Look at the actual html displayed in the browser to get the name you need to use.

You can try using $ ("[id $ = Table]). Attr (" id ") to get the modified version.

+2
source

There is nothing wrong with jQuery code, although it would be cleaner if you used toggleClass :

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

I would suggest that your id is erroneous - or you push another JavaScript error before this jQuery fragment starts.

+6
source

The first problem I see is that there is no element with the identifier "Entrance to the table", that is, which corresponds to "#Table input" - at least not in the html that you specified. Regardless, id cannot have a place, check this out. I will be happy to help you if you need.

+1
source

Grr, I just finished typing my answer to this question before it was deleted. Are you going to remove this too?

I created a sample file to validate your script, and it worked as I expected. I have included it below for your reference. At the same time, I suggest removing any code that is not related to a specific functionality that you are trying to solve during the test in order to exclude the absence of peripheral problems with other code. Also, be sure to create a view> source to make sure your table really has that identifier, and that your checkboxes and HTML are displayed correctly and correctly. If you break the HTML, your jQuery will not work.

Here is an example file that I used. Which browser are you testing?

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

More articles:


All Articles