javascript - performing jQuery show/hide on dynamically created content -
I have a page created with jQuery, and this page contains the table where the table rows have a classname that gives them Recognize a certain color (i.e. tr square = "yellow square")
The user is able to filter the rows by clicking on the hidden / hidden checkbox to show / hide the table.
My problem is that the table is generated through flyJSON requests. To add new content to the table, I do the children for the first time (). On the tabs of the table () () ($ ('my_table_tbody')) Children (). Remove ()), and then I'll use the append to add new table information back.
An example of this function is:
$ ('# my_table_tbody'). Children () Remove (); $ .getJSON ("http://my_url.com/my_cgi_bin/my_cgi", {data: myadata}, function (j) {var for mylength = j.length; (var k = mylength - 1; k> = 0; K--) $ ('& lt; tr] class = "' + j [k] .color + '" & gt; & lt; td class = "my_first_col_class"> gt; [j] Data1 + '& lt; / td & gt; & lt; td class = "my_second_col_class" & gt;' + j [k] .data2 + '& lt; / td & gt; & lt; / tr & gt; ). AppendTo ($ ('# my_table_tbody'));});
At the end of this function now, I am trying to check whether the checkbox is checked or not, and if so, to show / hide the new information. To call, basically
if (('#my_yellow_color_cb') etter ('check')) $ ('. Yellowclass'). Show (); And $ ('yellowclus'). Hide ();
The problem is that the page is not checking "remember". In other words, if the 'yellowclose' check box is unchecked, and the page reloads with the new table data, the yellowclass class is still showing when it is actually hidden.
I suspect that this is something to do with DOM, and appropriate DOM elements can be created that can be shown / hidden, but I do not know that in my special circumstances How to do. I'm a system programmer, and I'm doing this to program a tool that will provide some status information to our testers when it comes to JavaScript and I do not understand a bit of the DOM, I am not an expert, and I Can not figure out
How can I insert this page so that I can show and hide it properly?
If I update the page with the new table data, and then uncheck the box and uncheck it, then the job is OK. But if I load the table data, and just checks the status of the box, then it does not want to work.
Thanks for any help.
Maybe something like that?
$ ('# my_table_tbody'). Children () Remove (); $ .getJSON ("http://my_url.com/my_cgi_bin/my_cgi", {data: myadata}, function (j) {var for mylength = j.length; (var k = mylength - 1; k> = 0; K--) {var $ row = $ ('& lt; tr class = "' + j [k] .color + '" & gt; & lt; td class = "my_first_col_class"> gt; J [k] .data1 + '& lt; / td> td orbit = "my_second_col_class"> gt; [j] [k] .data2 +' & lt; / td & gt; & lt; / tr & gt; ; '); If ($ (' my_yellow_color_cb: checked ') .length == 0 & amp; $ row.is (' yellow ')) $ row.hide (); $ row.appendTo (' # my_table_tbody ') ;}});
Basically, each line is created as a DOM fragment and is then run conditionally. If $ ('# my_yellow_color_cb: checked'). Length is <0,0>, which means yellow check box is not checked, then
.hide ()
is executed for the line, after which, this row was added by adding is. If you want to expand the if statement with more logic for your other colors.
Comments
Post a Comment