使用带有 javascript 的查询字符串过滤多个表

Question

首先，如果我在某些时候表达不好，我很抱歉，英语不是我的母语。我正在开发一个应用程序，其中用户通过表单发送 2 个值，在另一个页面中，我使用其中一个数据（带逗号分隔选项的字符串）来显示特定的 table 并隐藏其他值，并使用第二个数据（整数）我显示了 table.

的其中一行

我已经拥有的： 我有表单并通过查询字符串发送数据，我捕获该数据，我将一个变量分配给整数和文本字符串，我用逗号分隔它并创建一个数组。

URL 示例：app.tables.example/?id=123&ops=option1%2c+option2

//Read parameters sent by form
const param = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop)
});

//Assign integer to a variable
let num = param.id;

//Assign options to a variable
let op = param.ops;

//Separate string with commas
let opsplit = op.split(',');

到目前为止一切都很完美，我可以毫无问题地打印所有变量，现在我需要将数组与每个 table 的 id 进行比较，显示对应的一个并隐藏其他的。（tables 的 id 与用户通过文本字符串传递的相同）。

table 看起来像这样：

<div id="option1" class="table-1">
<table width="100%">
<thead>
<tr>
<th align="left">Option1</th>
<th align="left">Integer</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Number</td>
<td align="left">Info</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left">textblock</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left">textblock</td>
</tr>
</tbody>
</table>
</div>

//As you can see the id of each table corresponds to what the user chose
<div id="option2" class="table-1">
<table width="100%">
<thead>
<tr>
<th align="left">Option2</th>
<th align="left">Integer</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Number</td>
<td align="left">Info</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left">textblock</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left">textblock</td>
</tr>
</tbody>
</table>
</div>

问题： 我应该在“for”循环中使用数组元素并将它们与每个 table 的 id 进行比较，然后显示 table 并隐藏其他元素，但我不知道如何做吧。

function myFunction() {
  var input, filter, table, tr, td, i, y, txtValue;
for (r = 0; r<opsplit.length; r++){
  input = opsplit[r];
  filter = function(x){
    return x.toUpperCase();
  };  
  opsplit = opsplit.map(filter);
  }

//When I test this, it does not return any value, 
//innerHTML error
 
  for(y = 0; y<opsplit.length; y++){
    table = document.getElementById(opsplit[y]).innerHTML;
 
//I use this section to test, it should show me the row,
//but since the previous loop failed, it does nothing.
// What I really need is to show the whole
// table where this data is located and hide the other tables. 
  tr = table.getElementsByTagName("tr");
  
    for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
}
myFunction();

我现在真的被困住了，希望得到任何帮助。字符串数组的正确使用方法是什么，如何隐藏用户不需要的table？

Answer 1

好的，感谢那些花时间写评论的人，但我找到了解决方案，我必须将表单数据转换为字符串和整数。然后我能够将该字符串与类 id 进行比较。我正在写答案以防有人觉得它有用。

//Read parameters sent by form
const param = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop)
});

//Assign number to a variable
let num = param.id;

//Convert to integer
let numint = parseInt(num);

//Assign options to a variable
let op = param.ops;

//Convert to String
let opstr = op.string();

//Separate string with commas
let opsplitstr = opstr.split(',');

//Assign class to a variable
tableclass = document.getElementsByClassName('table-1');

//Compare table class ids with string array
if (opsplitstr[0] == tableclass[0].id{
}
//We need a loop if we need compare all elements

TLDR：URL 不发送有关数据类型的信息，因此我必须读取它并根据需要进行转换。

使用带有 javascript 的查询字符串过滤多个表

Filter multiple tables using query string with javascript

javascript

string

html-table