JSで複数のhtmlテーブルをフィルタリングする

Question

私はHtmlで大きな複数のテーブルを持つページに取り組んでいます。 は、私が発見し、テーブルのすべてのセルのために、このスクリプトフィルタを適応し、それらをフィルタリングするには：ここ

<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 = ""; 
      } 
     } 
     } 
    }