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>

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

1 个答案: