jquery - nested tables, remove inner table containing pattern -
i have again issue scoping (i guess). want write generic possible function retrieve page , remove of code before set content placeholder (<div>)
below sample code of loading page:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>testtesttest</title> </head> <script type="text/javascript" src="/ajax/jquery-1.6.4.min.js"></script> <script type='text/javascript' src='/util.js'></script> <body> <div class='contentcontainer'> <hr> <div class='contentitem' id='restart' style="margin-top: 100px; margin-left: 100px; margin-bottom: 100px; display:block;"> <table> <tr> <td><img src='/images/warn__xl.gif'></td> <td><p style="font-size: 1.2em; font-weight: bold; color:#02a3c1;">loading: please wait...</p></td> </tr> </table> </div> <div class='contentitem' id='ready' style="margin-top: 100px; margin-left: 100px; margin-bottom: 100px; display:none;"> <div id="content"> </div> </form> </div> </div> <script type='text/javascript'> var content = $("#content"); //var content = $("#ready"); //hide loading bar function hideloading(){ loading.fadeto(1000, 0); }; $(document).ready(function(){ content.load('/ajax/test/cfg_3.html div .contentitem', function(content) { //$(this).find('table:not(:first-child)').css("font-style", "italic"); //just need replace css remove() remove italic. $(this).find('table:eq(2)').css("font-style", "italic"); //just need replace css remove() remove italic. /*$(this).find('table:contains("content based"):first-child').each(function(i){ //.css("display", "none"); // tabelle[i] = $(this).attr("onchange"); //$(this).attr("id",i) alert(i); });*/ $(this).find('tbody').each(function(){ //$("tr").children("td").find('table:contains("content based"):first-child').each(function() {$(this).css("font-style", "normal");}); $("tr").children("td").find('table:contains("content based")').each(function() {$(this).css("background-color", "yellow");}); //$("tr").children("td").find('table:contains("content based"):first-child').each(function() {$(this).remove();}); }); document.getelementbyid("restart").style.display = "none"; document.getelementbyid("ready").style.display = "block"; //alert('load performed.'); }); }); //intelligent version of submitform: refresh needed: (function() { // var proxied = submitform; submitform = function(theform, actionno, flags, primkey, confirmmsg, anchor, eval_code, customp) { //potential issue switch language... think actionno = 0 means reload. //alert('gotcha'); // function submit form $.ajax({ //type: theform.attr('method'), //type: get, //url: theform.attr('action'), //content.load('/ajax/test/cfg_3.html div .contentitem', function(content) { url: "/ajax/test/cfg_3.html", //data: theform.serialize(), success: function (data) { alert('ok'); var datahtml = $(data).html().filter("div .contentitem"); $(datahtml).find('table:eq(2)').css("font-style", "bold"); //just need replace css remove() remove italic. content.html(datahtml); } }); } return false; })(); </script> </body> </html> and excerpt of loaded page:
<html> <header> <script type='text/javascript' src='/util.js'></script> </header> <body> <div class='contentcontainer'> <hr> <div class='contentitem'> <table cellspacing='0' cellpadding='0'> <tr> <td class='icon' valign='top' width='100px'><img src='/images/webf__xl.gif' alt='parental control'></td> <td class='data' valign='top'> <table cellspacing='0' cellpadding='0'> <tr> <td align='left'><span class='itemtitle'>parental control</span></td> <td align='right'></td> </tr> <tr> <td colspan='2'> <p>this page summarizes configuration of thomson gateway regarding web site filtering. </p> <form name='sitefiltercfg' action='/cgi/b/sfltr/cfg/' method='post'> <br> <table cellspacing='0' cellpadding='0' width='100%'> <tr> <td width='40' valign='top'><img src='/images/bull__md.gif' alt=''></td> <td valign='top'> <span class='blocktitle'>title</span><br> <table width='100%' class='datatable' cellspacing='0' cellpadding='0'> <tr> <td></td> <td width='30px'></td> <td width='220px'></td> <td width='50px'></td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>use address based filter:</td> <td colspan='3'><input type='checkbox' name='30' value='1' ></td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>action:</td> <td colspan='3'> <select name='31' style='width: 270px'> <option value='0' >block</option> <option value='1' selected>allow</option> </select> </td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td colspan='4' align='right'> <input type='button' name='25' value='apply' onclick='submitform(document.sitefiltercfg,25,0,"","",0,"")' > <input type='button' name='26' value='cancel' onclick='submitform(document.sitefiltercfg,26,0,"","",0,"")' > </td> </tr> </table> <p>some text. </p> <table class='edittable' width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td> </tr> <tr> <td colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td> </tr> <tr> <th align='left'>web site</th> <th align='left'>action</th> <th align='left'>redirect</th> <th colspan='2'></th> </tr> <tr> <td colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td> </tr> <tr> <td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td> </tr> <tr> <td class='evenrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='10' alt=''><br></td> </tr> <tr> <td class='evenrow' colspan='5' align='center'><i>no filter rules defined.</i></td> </tr> <tr> <td class='evenrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='10' alt=''><br></td> </tr> <tr> <td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td> </tr> <tr> <td class='oddrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td> </tr> <tr> <td class='oddrow'><input type='text' name='32' maxlength='80' onkeypress='return noenter(event)' style='width: 60 '></td> <td class='oddrow'> <select name='33' style='width: 60 '> <option value='0' selected>block</option> <option value='1' >allow</option> <option value='2' >redirect</option> </select> </td> <td class='oddrow'><input type='text' name='34' maxlength='80' onkeypress='return noenter(event)' style='width: 60 '></td> <td class='oddrow' colspan='2' align='right' valign='middle'><input type='button' name='19' value='add' onclick='submitform(document.sitefiltercfg,19,1,"","",0,"")' ></td> </tr> <tr> <td class='oddrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td> </tr> <tr> <td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td> </tr> </table> </td> </tr> </table> </form> <br> <table cellspacing='0' cellpadding='0' width='100%'> <tr> <td width='40' valign='top'><img src='/images/bull__md.gif' alt=''></td> <td valign='top'> <span class='blocktitle'>content based filtering</span><br> <form name='contentfiltercfg' action='/cgi/b/sfltr/content/cfg/' method='post'> <table width='100%' class='datatable' cellspacing='0' cellpadding='0'> <tr> <td></td> <td width='30px'></td> <td width='220px'></td> <td width='50px'></td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>license type:</td> <td colspan='3'>none</td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>license expiration:</td> <td colspan='3'>unknown (server not yet contacted)</td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>use content based filter:</td> <td colspan='3'><input type='checkbox' name='30' value='1' ></td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td width='170'>action uncategorised sites:</td> <td colspan='3'> <select name='31' style='width: 270px'> <option value='0' selected>block</option> <option value='1' >allow</option> </select> </td> </tr> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td></td> <td></td> <td valign='bottom' colspan='2'>block categorized websites</td> </tr> </table> </form> <tr> <td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td> </tr> <tr> <td colspan='4' align='right'> <input type='button' name='10' value='apply' onclick='submitform(document.contentfiltercfg,10,0,"","",0,"")' > <input type='button' name='11' value='cancel' onclick='submitform(document.contentfiltercfg,11,0,"","",0,"")' > </td> </tr> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </div> </body> </html> i want remove "second" table after "content based filtering". in function not doing remove() rather coloring in yellow. seems whole page yellow... feeling "this" not in right scope.
any idea how can inner table , one, not matching on containing tables?
thanks lot!
edit:
thanks clav, found way in document ready function. now, i'm trying make "submitform" more clever, , refresh div instead of reloading page.
i thought needed copy paste code make work, did not work straight forward...
here excerpt of code works in document ready:
$(document).ready(function(){ content.load('/ajax/test/cfg_3.html div .contentitem', function(content) { $(this).find('tbody').each(function(){ $("span:contains('content based filtering')").parent("td < tr < tbody < table").css("background-color", "yellow"); }); document.getelementbyid("restart").style.display = "none"; document.getelementbyid("ready").style.display = "block"; }); }); but if same in submitform (i use ajax submit):
(function() { // var proxied = submitform; submitform = function(theform, actionno, flags, primkey, confirmmsg, anchor, eval_code, customp) { $.ajax({ url: "/ajax/test/cfg_3.html", // test datatype: "html" }) .done(function (html) { $(html).find('td').each(function(){ $("span:contains('content based filtering')").parent("td").parent("tr").parent("tbody").parent("table").css("background-color", "yellow"); }); content.html(html); }) .fail(function (html) { window.location.reload(); }); } return false; })(); it doesn't work. understanding is because source code of cfg3.html doesn't contain <tbody> tag. changed , loaded html in placeholder modified (i abandonned trying hierarchy failed):
(function() { // var proxied = submitform; submitform = function(theform, actionno, flags, primkey, confirmmsg, anchor, eval_code, customp) { $.ajax({ url: "/ajax/test/cfg_3.html", // test datatype: "html" }) .done(function (html) { content.html(html); content.find('tbody').each(function(){ $("span:contains('content based filtering')").parent("td").parent("tr").parent("tbody").parent("table").css("background-color", "yellow"); }); }) .fail(function (html) { window.location.reload(); }); } return false; })(); my issue works in ff not in ie... don't see why because i'm doing same in submitform doing in document.ready
any idea? thanks
your code coloring table cells yellow looping on table bodies on document , row selectors in loop aren't scoped particular table, you're iterating on every table row in document once every table on page. if i'm understanding correctly , want table class datatable in form after span containing text "content based filtering" should able this:
$("span:contains('content based filtering')").next("form").children("table.datatable").css("background-color", "yellow");
Comments
Post a Comment