インデックスでテーブルを検索する（インデックスを選択する）

Question

ユーザーが名前または都市で検索できるテーブルを作成しました。

名前を検索するとき、関数は正しいテーブルと呼び出しに関連付けられたインデックスを選択する必要があります。ここに私の試みです。

望ましい結果：ユーザーが名前または都市で検索することを選択したとき、彼/彼女に選択入力で タイプ、関数は、入力の内部呼び出しであるインデックス番号 に耳を傾けます。

function searchIndex(id, index) { 
 
    // Declare variables 
 
    var filter, tr, td, i; 
 
    var table = document.getElementById(id); 
 
    var input = document.getElementById(index); 
 
    filter = input.value.toUpperCase(); 
 
    tr = table.getElementsByTagName("tr"); 
 

 
    // Loop through all table rows, and hide those who don't match the search query 
 
    for (i = 0; i < tr.length; i++) { 
 
    td = tr[i].getElementsByTagName("td")['']; 
 
    if (td) { 
 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     tr[i].style.display = ""; 
 
     } else { 
 
     tr[i].style.display = "none"; 
 
     } 
 
    } 
 
    } 
 
} 
 

 

 
const searchName = document.getElementById('searchName'); 
 
const searchCity = document.getElementById('searchCity'); 
 
const Select = document.getElementById('Select'); 
 

 
Select.addEventListener('click',() => { 
 
    if (Select.value == 'name') { 
 
    searchName.style.display = 'block'; 
 
    searchCity.style.display = 'none'; 
 
    } else { 
 
    searchName.style.display = 'none'; 
 
    searchCity.style.display = 'block'; 
 
    } 
 
})

table { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 500px; 
 
} 
 

 
td { 
 
    width: 250px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #fff; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background-color: #eee; 
 
}

<div id="ListDiv"> 
 
    <div class="Btns"> 
 

 
    <input id="searchName" onkeyup="searchIndex('List' , [0])" type="text" placeholder="search name" /> 
 

 
    <input id="searchCity" onkeyup="searchIndex('List' , [1])" style="display: none;" type="text" placeholder="search city" /> 
 

 
    <div id="SelectDiv"> 
 
     <select id="Select"> 
 
      <option value="name">search name</option> 
 
      <option value="city">search city</option> 
 
      </select> 
 
    </div> 
 
    </div> 
 
    <table id="ListTop"> 
 
    <tr> 
 
     <td>name</td> 
 
     <td>city</td> 
 
    </tr> 
 
    </table> 
 
    <div class="custScroll"> 
 

 
    <table id="List"> 
 
     <tr> 
 
     <td>hanna</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
     <tr> 
 
     <td>bonne</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
     <tr> 
 
     <td>thomas</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

、それを考え出し[0]から[index]にインデックスを変更し、関数パラメータリストに[index]を添加しました。

function searchIndex(id, id2, [index]) { 
 
    // Declare variables 
 
    var filter, tr, td, i; 
 
    var table = document.getElementById(id); 
 
    var input = document.getElementById(id2); 
 
    filter = input.value.toUpperCase(); 
 
    tr = table.getElementsByTagName("tr"); 
 

 
    // Loop through all table rows, and hide those who don't match the search query 
 
    for (i = 0; i < tr.length; i++) { 
 
    td = tr[i].getElementsByTagName("td")[index]; 
 
    if (td) { 
 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
     tr[i].style.display = ""; 
 
     } else { 
 
     tr[i].style.display = "none"; 
 
     } 
 
    } 
 
    } 
 
} 
 

 

 
const searchName = document.getElementById('searchName'); 
 
const searchCity = document.getElementById('searchCity'); 
 
const Select = document.getElementById('Select'); 
 

 
Select.addEventListener('click',() => { 
 
    if (Select.value == 'name') { 
 
    searchName.style.display = 'block'; 
 
    searchCity.style.display = 'none'; 
 
    } else { 
 
    searchName.style.display = 'none'; 
 
    searchCity.style.display = 'block'; 
 
    } 
 
})

table { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 500px; 
 
} 
 

 
td { 
 
    width: 250px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #fff; 
 
} 
 

 
tr:nth-child(odd) { 
 
    background-color: #eee; 
 
}

<div id="ListDiv"> 
 
    <div class="Btns"> 
 

 
    <input id="searchName" onkeyup="searchIndex('List' , 'searchName', [0])" type="text" placeholder="search name" /> 
 

 
    <input id="searchCity" onkeyup="searchIndex('List' , 'searchCity', [1])" style="display: none;" type="text" placeholder="search city" /> 
 

 
    <div id="SelectDiv"> 
 
     <select id="Select"> 
 
      <option value="name">search name</option> 
 
      <option value="city">search city</option> 
 
      </select> 
 
    </div> 
 
    </div> 
 
    <table id="ListTop"> 
 
    <tr> 
 
     <td>name</td> 
 
     <td>city</td> 
 
    </tr> 
 
    </table> 
 
    <div class="custScroll"> 
 

 
    <table id="List"> 
 
     <tr> 
 
     <td>hanna</td> 
 
     <td>big sandy</td> 
 
     </tr> 
 
     <tr> 
 
     <td>bonne</td> 
 
     <td>hawkins</td> 
 
     </tr> 
 
     <tr> 
 
     <td>thomas</td> 
 
     <td>gilmer</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>