2017-10-24 5 views
0

이 변수를 사용하여 hide 클래스를 내 변수 text 값이 포함 된 테이블 행에 추가합니다. 문제는 일반적으로 내 selectedtd 두 값을 얻을 수 있지만이 함수는 하나의 값으로 잘 작동합니다.addClass에서 여러 결과 찾기

내 테이블 :

<div id="csvtextcomptb" class="tableunform"><table cellspacing="1" 
cellpadding="1" border="1"><thead><tr><th>TABLE</th><th>TAG</th><th>DATE</th><th>STATUS</th><th>Key</th><th>Prev</th></tr></thead> 
<tbody><tr><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(1)</td><td>CA5520</td><td>MP &lt; 1K</td></tr> 
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5520</td><td>MP &gt; 1K</td></tr> 
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5534</td><td>MP &gt; 1K</td></tr> 
<tr class="hide"><td>COMP</td><td>COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5328</td><td>MP &gt; 1K</td></tr></tbody></table></div> 

<table id="filter_crca"> 
    <tbody> 
     <tr> 
      <td class="pointer selected">MP &lt; 1K</td> 
      <td class="pointer">MP &gt; 1K</td> 
     </tr> 
    </tbody> 
</table> 

기능 :

$(document).on("click","[id*='filter_'] tbody td", function(e){ 

    $(this).toggleClass('selected'); 
    var prev = $(this).text().trim(); 
    var tbid = $(this).closest('table').attr('id'); 
    var regExp = /[^\*filter_]\w+/; 
    var tableid = regExp.exec(tbid.toString()); 

    var tipotb = tableid.toString().split('_')[0]; 

    var text = $('#filter_' + tableid).find("td").map(function(){ 

     if($(this).hasClass("selected")) { 

      return $(this).text() 

     } 

}).get(); 

    $.each(text, function(index, value){ 

      $('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + value + "')").removeClass('hide'); 
      $('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + value + "'))").addClass('hide'); 
      }); 
}); 

어떻게 추가하거나 hide을 제거하기 위해 selected 클래스와 td의 해당 값을 읽고 병합이 기능을 변경할 수 있습니까?

감사합니다. 이

+0

더 많은 코드를 제공, 어디 아이디 csvtex은? 또는 그것이 만들어 졌을 때 –

+0

@bRIMOs 완료! 감사합니다 –

+0

내 대답을 참조하십시오, –

답변

1

희망은 당신이 찾고있는 무엇을 : 나는 아래의 미리보기가 원하는 경우 knkow 해달라고

$(document).on("click", "[id*='filter_'] tbody td", function (e) { 
 
\t var prev = $(this).text().trim(); 
 
\t var tbid = $(this).closest('table').attr('id'); 
 
\t var regExp = /[^\*filter_]\w+/; 
 
\t var tableid = regExp.exec(tbid.toString()); 
 
\t var tipotb = tableid.toString().split('_')[0]; 
 

 
\t //Added code 
 
\t $('#filter_' + tableid).find("td").not(this).removeClass('selected'); 
 
\t $(this).toggleClass('selected'); 
 
\t var text = $('#filter_' + tableid).find("td.selected").text(); 
 
\t $('#csvtext' + tipotb + 'tb tbody tr').addClass("hide"); 
 
\t //End 
 

 
\t $('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + text + "')").removeClass('hide'); 
 
\t //$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + text + "'))").addClass('hide'); 
 
});
.selected { 
 
\t color: red; 
 
} 
 

 
.hide { 
 
\t display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="csvtextcomptb" class="tableunform"> 
 
\t <table cellspacing="1" cellpadding="1" border="1"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>TABLE</th> 
 
\t \t \t \t <th>TAG</th> 
 
\t \t \t \t <th>DATE</th> 
 
\t \t \t \t <th>STATUS</th> 
 
\t \t \t \t <th>Key</th> 
 
\t \t \t \t <th>Prev</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>COMP</td> 
 
\t \t \t \t <td> COMP_TRUCK </td> 
 
\t \t \t \t <td>17/10/2017</td> 
 
\t \t \t \t <td>Prev(1)</td> 
 
\t \t \t \t <td>CA5520</td> 
 
\t \t \t \t <td>MP &lt; 1K</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="hide"> 
 
\t \t \t \t <td>COMP</td> 
 
\t \t \t \t <td> COMP_TRUCK </td> 
 
\t \t \t \t <td>17/10/2017</td> 
 
\t \t \t \t <td>Prev(2)</td> 
 
\t \t \t \t <td>CA5520</td> 
 
\t \t \t \t <td>MP &gt; 1K</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="hide"> 
 
\t \t \t \t <td>COMP</td> 
 
\t \t \t \t <td> COMP_TRUCK </td> 
 
\t \t \t \t <td>17/10/2017</td> 
 
\t \t \t \t <td>Prev(2)</td> 
 
\t \t \t \t <td>CA5534</td> 
 
\t \t \t \t <td>MP &gt; 1K</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="hide"> 
 
\t \t \t \t <td>COMP</td> 
 
\t \t \t \t <td>COMP_TRUCK </td> 
 
\t \t \t \t <td>17/10/2017</td> 
 
\t \t \t \t <td>Prev(2)</td> 
 
\t \t \t \t <td>CA5328</td> 
 
\t \t \t \t <td>MP &gt; 1K</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div> 
 

 
<table id="filter_comp"> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td class="pointer selected">MP &lt; 1K</td> 
 
\t \t \t <td class="pointer">MP &gt; 1K</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

1

,하지만 난 단으로 코드에 약간의 변화를 설정 한 사용자 수요, 또한 그것의 필터 ID와 관련된 잘못된 테이블을 가지고!

은 아래를 참조 니펫을 :

$(document).on("click", "[id*='filter_'] tbody td", function(e) { 
 
    $(this).toggleClass('selected'); 
 
    var prev = $(this).text().trim(); 
 

 
    var tbid = $(this).closest('table').attr('id'); 
 
    var regExp = /[^\*filter_]\w+/; 
 
    var tableid = regExp.exec(tbid.toString()); 
 

 
    var tipotb = tableid.toString().split('_')[0]; 
 

 
    
 
    $('#csvtext' + tipotb + 'tb tbody').find("tr").addClass('hide'); 
 
    
 
    $('#filter_' + tableid).find("td").each(function() { 
 
    
 
    if ($(this).hasClass("selected")) { 
 
     var text = $(this).text(); 
 
     $('#csvtext' + tipotb + 'tb tbody').find("td:contains('" + text + "')").parent('tr').removeClass('hide'); 
 
    } 
 
    }); 
 
});
.pointer { 
 
    cursor: pointer; 
 
    border: 1px solid black; 
 
} 
 

 
.selected { 
 
    color: red; 
 
    font-weight: bold; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="csvtextcrcatb" class="tableunform"> 
 
    <table cellspacing="1" cellpadding="1" border="1"> 
 
    <thead> 
 
     <tr> 
 
     <th>TABLE</th> 
 
     <th>TAG</th> 
 
     <th>DATE</th> 
 
     <th>STATUS</th> 
 
     <th>Key</th> 
 
     <th>Prev</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>COMP</td> 
 
     <td> COMP_TRUCK </td> 
 
     <td>17/10/2017</td> 
 
     <td>Prev(1)</td> 
 
     <td>CA5520</td> 
 
     <td>MP &lt; 1K</td> 
 
     </tr> 
 
     <tr > 
 
     <td>COMP</td> 
 
     <td> COMP_TRUCK </td> 
 
     <td>17/10/2017</td> 
 
     <td>Prev(2)</td> 
 
     <td>CA5520</td> 
 
     <td>MP &gt; 1K</td> 
 
     </tr> 
 
     <tr > 
 
     <td>COMP</td> 
 
     <td> COMP_TRUCK </td> 
 
     <td>17/10/2017</td> 
 
     <td>Prev(2)</td> 
 
     <td>CA5534</td> 
 
     <td>MP &gt; 1K</td> 
 
     </tr> 
 
     <tr > 
 
     <td>COMP</td> 
 
     <td>COMP_TRUCK </td> 
 
     <td>17/10/2017</td> 
 
     <td>Prev(2)</td> 
 
     <td>CA5328</td> 
 
     <td>MP &gt; 1K</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
<table id="filter_crca"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="pointer selected">MP &lt; 1K</td> 
 
     <td class="pointer selected">MP &gt; 1K</td> 
 
    </tr> 
 
    </tbody> 
 
</table>