2013-05-13 3 views
1

다시 범위 지정 문제가 있습니다.중첩 테이블, 패턴이 포함 된 내부 테이블 제거

<!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 to replace the css by remove() to remove what is italic. 
     $(this).find('table:eq(2)').css("font-style", "italic"); //just need to replace the css by remove() to remove what is 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 was performed.'); 
    }); 
    }); 

    //intelligent version of submitform: will only refresh what was needed: 
    (function() { 
    // 
    var proxied = submitForm; 
    submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP) { 
    //potential issue with the switch language... I think actionNo = 0 means reload. 
    //alert('gotcha'); 
    // Function submit a 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 to replace the css by remove() to remove what is italic. 
       content.html(dataHTML); 
      } 
     }); 

    } 
    return false; 
    })(); 

</script> 

</body> 
</html> 
: 한 페이지를 검색하고 내가 로딩 페이지의 샘플 코드 아래에 자리 표시 자 ( <DIV>)

에 내용을 설정하기 전에 해당 코드의 일부를 제거 할 수 함수로 같은 일반을 쓰고 싶어

그리고로드 된 페이지의 발췌 :

내가 <span class='blocktitle'>Content Based Filtering</span> 후 "두 번째"테이블을 제거 할
<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 the configuration of your 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 for 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 all 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> 

. 함수에서 나는 remove()을하지 않고 오히려 노란색으로 채색합니다. 전체 페이지가 노란색으로 보입니다 ... "이"가 올바른 범위에 있지 않다는 내 느낌이 있습니다.

내가 가장 안쪽 테이블과 그 중 하나를 어떻게 얻을 수 있는지, 모든 포함 테이블에 일치하지 않는 아이디어?

는 편집 : CLAV에

감사합니다, 나는 문서 준비 기능에 그렇게 할 수있는 방법을 발견했다. 이제 "submitForm"을 더 영리하게 만들고 페이지를 다시로드하는 대신 div를 새로 고칩니다.

난 그냥 작동하도록 코드를 붙여 복사 필요하다고 생각하지만 앞으로 똑바로 작동하지 않았다 ... 여기

문서에 준비 작동 코드의 일부 발췌

:

$(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"; 
}); 
}); 
나는 SubmitForm에에서 동일한 작업을 수행하는 경우

그러나 다음 (I 제출 Ajax를 사용) :

(function() { 
    // 
    var proxied = submitForm; 
    submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP) { 
     $.ajax({ 
      url: "/AJAX/test/cfg_3.html", 
      // for test I do a get 
     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; 
    })(); 

그것은 작동하지 않습니다. cfg3.html의 소스 코드에 <tbody> 태그가 포함되어 있지 않기 때문에 필자가 아는 바가 있습니다. 그래서 (실패한 나는 다른 계층 구조를 시도 포기)으로 변경하고, 자리의 HTML은 다음을 수정로드 :

(function() { 
    // 
    var proxied = submitForm; 
    submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP) { 
     $.ajax({ 
      url: "/AJAX/test/cfg_3.html", 
      // for test I do a get 
     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; 
    })(); 

내 문제는이 파이어 폭스에 있지만 IE에서 작동한다는 것입니다 ... 난 몰라 왜 기본적으로 submitForm에서 동일한 작업을 수행하고 있는지 알고 싶습니다. document.ready.

아이디어가 있으십니까?

답변

0

표 셀을 노란색으로 채우는 코드가 문서의 모든 표 본문을 반복하고 있으며 해당 루프의 행 선택 자의 범위가 특정 표의 범위가 아닙니다. 정말 실제로 모든 표 행을 반복하고 있습니다. 페이지에있는 모든 테이블에 대해 한 번만 문서를 작성하십시오. 불행하게도,

$("span:contains('Content Based Filtering')").next("form").children("table.datatable").css("background-color", "yellow"); 
+0

: 내가 제대로 이해하고있어 즉시 텍스트를 포함한 spanform의 클래스 datatabletable를 얻고 싶다면 "내용 기반 필터링은"당신은이 작업을 수행 할 수 있어야한다 그 관계가 그렇게 쉽지는 않은 것 같습니다 ... 좋은 것은 아니지만 이것이 작동하는 것으로 나타났습니다. IMHO : '$ ("span : contains ('Content Based Filtering ')"). parent ("td

+0

부모 테이블에 클래스를 추가 할 수 있습니까? – clav

+0

불행히도 아닙니다. 현재 PC에서 테스트하고 있지만, 실제로는 레거시 SW (CGI 생성 페이지) 위에 새로운 인터페이스를 구축하고 있습니다. –