JavaScriptシングル入力検索複数のhtmlテーブルの列

Question

私はHTMLテーブルを構築するためにPHPとMySQLを使用しています。 JavaScriptを使用してテーブルをフィルタリング/検索し、必要な結果だけを表示します。私は、JavaScriptの入力でテーブルの複数の<td>を検索する必要があります。私はこれをうまく動作させることができましたが、大きなテーブルで適切に配置するための洗練されたソリューションではありません。

何が検索されているかを選択するには良い方法がありますが、何も見つかりませんでした。誰も私がこのコードをさまざまな列幅テーブルに対してより柔軟にする方法を知っていますか？

function myFunction() { 
 
     var input, filter, table, tr, td, i; 
 
     input = document.getElementById("myInput"); 
 
     filter = input.value.toUpperCase(); 
 
     table = document.getElementById("myTable"); 
 
     tr = table.getElementsByTagName("tr"); 
 
     for (i = 0; i < tr.length; i++) { 
 
     td = tr[i].getElementsByTagName("td")[0]; 
 
     td1 = tr[i].getElementsByTagName("td")[1]; 
 
     if (td+td1) { 
 
      if ((td.innerHTML.toUpperCase().indexOf(filter)+td1.innerHTML.toUpperCase().indexOf(filter)) > -2) { 
 
      tr[i].style.display = ""; 
 
      } else { 
 
      tr[i].style.display = "none"; 
 
      } 
 
     }  
 
     } 
 
    }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in anything"> 
 
    
 
    <table id="myTable"> 
 
     <tr class="header"> 
 
     <th style="width:60%;">Name</th> 
 
     <th style="width:40%;">Country</th> 
 
     </tr> 
 
     <tr> 
 
     <td>North/South</td> 
 
     <td>UK</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Paris specialites</td> 
 
     <td>France</td> 
 
     </tr> 
 
    </table> 
 

Answer 1

あなたが改善することができますがたくさんあります。まず、変数を明示的に宣言することを忘れないでください。さもなければ、変数はグローバルになります。

このソリューションは、特定の数の列に依存しません。どれくらいの数があっても機能します。

以上のインラインコメントを参照してください：

// Get DOM references just once: 
 
var input = document.getElementById("myInput"); 
 
var table = document.getElementById("myTable"); 
 

 
// Do event binding in JavaScript, not HTML 
 
input.addEventListener("keyup", filter); 
 
input.addEventListener("search", filter); 
 

 
// Get all rows, except the header and convert to array so .forEach() can be used to loop 
 
var rows = Array.prototype.slice.call(table.querySelectorAll("tr:not(.header)")); 
 

 
function filter() { 
 
    // Always trim user input 
 
    var filter = input.value.trim().toUpperCase(); 
 

 
    // Loop the rows 
 
    rows.forEach(function(row) { 
 
    
 
    // You really don't need to know if the search criteria 
 
    // is in the first or second cell. You only need to know 
 
    // if it is in the row. 
 
    var data = ""; 
 
    // Loop over all the cells in the current row and concatenate their text 
 
    Array.prototype.slice.call(row.getElementsByTagName("td")).forEach(function(r){ 
 
     // Don't use .innerHTML unless there is HTML. Use textContent when there isn't. 
 
     data += r.textContent; 
 
    }); 
 

 
    // Check the string for a match and show/hide row as needed 
 
    // Don't set individual styles. Add/remove classes instead 
 
    if(data.toUpperCase().indexOf(filter) > -1){ 
 
     // show row 
 
     row.classList.remove("hidden"); 
 
    } else { 
 
     // hide row 
 
     row.classList.add("hidden"); 
 
    } 
 
    }); 
 
    
 
}

input[type=search]{ 
 
    border-radius:10px; 
 
    outline:0; 
 
    padding:3px; 
 
} 
 

 
input[type=search]:focus{ 
 
    box-shadow:0 0 4px blue; 
 
} 
 

 
.hidden { display:none; } 
 
.leftHeader { width:60%; } 
 
.rightHeader { width:40%; }

<!-- Use the actual "search" input type and don't do inline CSS or JavaScript --> 
 
<input type="search" id="myInput" placeholder="Search" title="Type in anything"> 
 
    
 
<table id="myTable"> 
 
    <tr class="header"> 
 
    <th class="leftHeader">Name</th> 
 
    <th class="rightHeader">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>