JS로 여러 HTML 테이블 필터링

Question

나는 여러 개의 큰 테이블이있는 페이지에서 작업하고 있습니다. 내가 발견하고 테이블의 모든 셀이 스크립트 필터를 적용을 필터링하려면 여기

<script> 
function searchtable() { 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    th = table.getElementsByTagName("th"); 

    for (i = 1; i < tr.length; i++) { 
    if (!tr[i].classList.contains('header')) { 
     td = tr[i].getElementsByTagName("td"), 
     match = false; 
     for (j = 0; j < td.length; j++) { 
     if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { 
      match = true; 
      break; 
     } 
     } 
     if (!match) { 
     tr[i].style.display = "none"; 
     } else { 
     tr[i].style.display = ""; 
     } 
    } 
    } 
} 
</script> 

문제는 만 페이지의 첫 번째 테이블이 아닌 다른 사람의 코드가 작동. 모든 테이블마다 맞춤 스크립트를 반복하지 않는 편이 낫습니다. 스크립트를 개인화하여 여러 테이블에서 조회하는 방법에 대한 제안 사항이 있습니까?

편집 : 동일한 작업을 수행하는 다른 스크립트를 알고 있습니까?

Answer 1

내가 변경 한 대부분의 지역을 설명하는 시도했습니다. 결국 코드 자체는 약간 더 짧지 만 조금 더 복잡합니다. 내가 올바르지 않은 가정을 한 경우 알려주십시오. (예를 들어, 우리가 모델을 발명 한 이유는,이 인 '헤더'클래스는 솔직히 <th> elements)

var searchTable = function searchTable(table, input) { 
 
    // Since we bound the input, we can use input.value to get the current words typed into the input. 
 
    var filter = input.value, 
 
     // A table has both a thead and a tbody. 
 
     // By only selecting the tr nodes from the body, we can remove the entire 'check if this is a header tr logic of `tr.classList.contains('header')` 
 
     // Keep in mind that querySelector returns a nodeList, so if we want to use array methods, we need to covnert it into a real array. 
 
     // The original code uses getElementsByTagName, which return a LIVE nodeList, watch out for this difference. 
 
     rows = Array.prototype.slice.call(table.querySelectorAll('tbody tr')); 
 
    rows.forEach(function(row) { 
 
     // Since we don't care in which cell the fitler is contained, we can just check the innerHTML of the entire row. 
 
     // This will only fail if the filter typed into the inputs is either 'tr' or 'td' 
 
     var hide = (row.innerHTML.indexOf(filter) === -1); 
 
     // The alternative is actually checking each cell, but this makes the script take longer: 
 
     // var hide = !Array.prototype.slice.call(row.querySelectorAll('td')).some(function(cell) { 
 
     //  return (cell.innerHTML.indexOf(filter) !== -1); 
 
     // }); 
 
     if (hide) row.classList.add('gone'); 
 
     else if (row.classList.contains('gone')) row.classList.remove('gone'); 
 
    }); 
 
    }, 
 
    // helper function that we can use to bind the searchTable function to any table and input we want 
 
    // We add an onchange event listener, passing it a bound version of searchTable. 
 
    bindSearch = function bindSearch(tableID, inputID) { 
 
    var input = document.querySelector(inputID), 
 
     table = document.querySelector(tableID); 
 
    if (table && input) input.addEventListener('change', searchTable.bind(null, table, input)); 
 
    else alert('Table or input does not exist.'); 
 
    }; 
 
// We can add as many individual inputs/tables as we want by just calling bindSearch with the right ids. 
 
bindSearch('#table1', '#input1'); 
 
bindSearch('#table2', '#input2');

.gone { 
 
    display: none; 
 
}

<input type="text" id="input1"> 
 
<table id="table1"> 
 
    <thead> 
 
    <tr> 
 
     <th>header 1</th> 
 
     <th>header 2</th> 
 
     <th>header 3</th> 
 
     <th>header 4</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Cell 1-1: foo</td> 
 
     <td>Cell 1-2: bar</td> 
 
     <td>Cell 1-3: baz</td> 
 
     <td>Cell 1-4: foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 2-1: apples</td> 
 
     <td>Cell 2-2: cherries</td> 
 
     <td>Cell 2-3: bananas</td> 
 
     <td>Cell 2-4: foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 3-1: cars</td> 
 
     <td>Cell 3-2: bar</td> 
 
     <td>Cell 3-3: planes</td> 
 
     <td>Cell 3-4: apples</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 4-1: baz</td> 
 
     <td>Cell 4-2: 2017</td> 
 
     <td>Cell 4-3: 2010</td> 
 
     <td>Cell 4-4: 2001</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 5-1: cars</td> 
 
     <td>Cell 5-2: 2017</td> 
 
     <td>Cell 5-3: foo</td> 
 
     <td>Cell 5-4: undefined</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<br> 
 
<input type="text" id="input2"> 
 
<table id="table2"> 
 
    <thead> 
 
    <tr> 
 
     <th>header 1</th> 
 
     <th>header 2</th> 
 
     <th>header 3</th> 
 
     <th>header 4</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Cell 1-1: foo</td> 
 
     <td>Cell 1-2: bar</td> 
 
     <td>Cell 1-3: baz</td> 
 
     <td>Cell 1-4: foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 2-1: apples</td> 
 
     <td>Cell 2-2: cherries</td> 
 
     <td>Cell 2-3: bananas</td> 
 
     <td>Cell 2-4: foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 3-1: cars</td> 
 
     <td>Cell 3-2: bar</td> 
 
     <td>Cell 3-3: planes</td> 
 
     <td>Cell 3-4: apples</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 4-1: baz</td> 
 
     <td>Cell 4-2: 2017</td> 
 
     <td>Cell 4-3: 2010</td> 
 
     <td>Cell 4-4: 2001</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell 5-1: cars</td> 
 
     <td>Cell 5-2: 2017</td> 
 
     <td>Cell 5-3: foo</td> 
 
     <td>Cell 5-4: undefined</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

HTML :

<table id="table2"> 
     <thead></thead> 
     <tbody> 
     <tr></tr> <tr></tr> 
     </tbody> 
    </table> 

JS는 :

var table1 = document.getElementById("table1"); 
    var table2 = document.getElementById("table2"); 

searchtable(table1); 
searchtable(table2); 

    function searchtable(table) { 
     var input, filter, table, tr, td, i; 
     input = document.getElementById("myInput"); 
     filter = input.value.toUpperCase(); 

     tr = table.getElementsByTagName("tr"); 
     th = table.getElementsByTagName("th"); 

     for (i = 1; i < tr.length; i++) { 
     if (!tr[i].classList.contains('header')) { 
      td = tr[i].getElementsByTagName("td"), 
      match = false; 
      for (j = 0; j < td.length; j++) { 
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { 
       match = true; 
       break; 
      } 
      } 
      if (!match) { 
      tr[i].style.display = "none"; 
      } else { 
      tr[i].style.display = ""; 
      } 
     } 
     } 
    }