Question

我有一个包含多列的表（对于这个问题，我只创建了两列），我希望用户能够通过索引搜索列，具体取决于用户可以选择的选项。我有工作代码，但为了更改搜索选项，我不得不复制每个输入的函数。

如何按索引搜索？如果用户选择类似（名称）的选项，则javascript函数会将搜索的索引更改为[0]。如果用户选择（位置），该函数将索引更改为[1]并搜索该列。

这可能吗？任何帮助，将不胜感激。

char sizes[256];
f = fopen("outputimage.pfm", "wb");
double scale = -1.0;
fprintf(f, "PF\n%d %d\n%lf\n", PixelWidth, PixelHeight, scale);
for (int i = 0; i < PixelWidth*PixelHeight*3; i++) {
    float d = data[i];
    fwrite((void *)&d, 1, 4, f);
}
fclose(f);

const searchName = document.getElementById('searchName');
const searchLoc = document.getElementById('searchLoc');
custSelect.addEventListener('click', () => {
  if (custSelect.value == 'custname') {
    searchName.style.display = 'block';
    searchLoc.style.display = 'none';
  } else {
    searchName.style.display = 'none';
    searchLoc.style.display = 'block';
  }
});


// Search for customer, or search for location, index will change based on option selected.
function tableSearch(id, index) {
  // Declare variables
  var filter, input, table, tr, td, i;
  input = document.getElementById(id);
  filter = input.value.toUpperCase();
  table = document.getElementById(id);
  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")[0]; // index will change based on option selected.
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Answer 1

这应该让你走上正轨

var table = document.getElementById('tab'),
  col = document.getElementById('col'),
  val = document.getElementById('val');
col.max = table.rows[0].cells.length - 1;

function search() {
  var regex = new RegExp(val.value || '', 'i');
  for (var i = table.rows.length; i-- > 1;) {
    if (regex.test(table.rows[i].cells[+col.value].innerHTML)) {
      table.rows[i].style.display = 'table-row';
    } else
      table.rows[i].style.display = 'none';
  }
}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid;
}

<label for="col">Column :</label>
<input type="number" id="col" placeholder="column" onkeyup="search()" min="0" step="1" />
<br>
<label for="val">Find :</label>
<input type="text" id="val" placeholder="cell" onkeyup="search()" />
<table id="tab">
  <tr>
    <th>Customers</th>
    <th>Main Location</th>
  </tr>
  <tr>
    <td>josh</td>
    <td>hawkins</td>
  </tr>
  <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>

Answer 2

我认为他们是进行这项研究的两种简单方法：

使用对象数组搜索您需要的内容，在每次研究时重新组织它，并在每次表格更改时重新制作html表格。

或者使用dataTable，这是一个非常简单的工具排序工具。

按索引编写的JavaScript搜索表

2 个答案: