按索引搜索表（选择索引）答案

【问题标题】：Search table by index (choose the index)按索引搜索表（选择索引）
【发布时间】：2018-05-06 09:25:23
【问题描述】：

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

在搜索名称时，该函数应选择正确的表和附加到调用的索引。这是我的尝试。

期望结果：用户选择按姓名或按城市以及何时搜索在所选输入中键入，该函数侦听索引号那是在输入里面的调用。

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>

【问题讨论】：

“函数监听输入内调用中的索引号” - 在这里监听数字是什么意思？ “附加到呼叫的索引” - 这里的附加是什么意思？
像 onkeyup( 'List' , [0] ) 索引是“附加”的，因此它会找到函数调用中的索引或“监听”它
我认为更有用的描述可能是：“用户可以指定搜索词和表格列。单击搜索按钮时，所有包含搜索词的表格行（或条目）指定的列将突出显示（或其他）”。我会说列索引作为searchIndex 函数的参数提供，而不是“附加”。同样，使用“听一个号码”，您可以例如写“接收列索引作为第二个参数”。

标签： javascript html arrays search indexof

【解决方案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>

【讨论】：