按索引搜索 table（选择索引）

Question

我创建了一个 table，用户应该可以在其中按名称或城市进行搜索。

搜索名称时，函数应选择正确的 table 和调用所附的索引。这是我的尝试。

Desired Outcome: user chooses to search by name or by city and when he/she types in the selected input, the function listens to the index number that is in the call inside the input.

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>

按索引搜索 table（选择索引）

Search table by index (choose the index)

html

javascript

arrays

search

indexof