HTML 表使用 Javascript Arrays

Question

有没有办法通过 javascript arrays 使用关键字搜索表？ 我的搜索仅根据现有表格中的措辞找到表格。 是否可以添加关键字来显示某些结果？ 例如，如果我搜索“Apple”，它应该显示与搜索“ABC”相同的结果。 请参阅下面的表格。

请注意，我无法编辑 HTML 表（将 class 添加到其中），因为该表是使用内容管理系统 (CMS) 自动生成的。

 function myFunction() { const userInput = document.getElementById("myInput").value.toUpperCase(); const tableRows = document.querySelectorAll("table tr"); for (let i = 0; i < tableRows.length; i++) { const rowTextContent = tableRows[i].innerText.toUpperCase(); tableRows[i].style.display = rowTextContent.toUpperCase().includes(userInput)? "": "none"; } }

 table.table_brdr td { padding: 8px 10px; border: none; } table.table_brdr th { background-color: #a6a6a6; color: black; } tr:nth-of-type(odd) { background-color#D3D3D3; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 20%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; }

 <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search forms list" title="Search forms list"></p> <table class="table_brdr" id="myTable"> <tr> <th>Column1</th> <th><strong>Column2</th> <th>Column3</th> </tr> <tr> <td>abc</td> <td>xyz</td> <td>03/30/2017</td> </tr> <tr> <td>test12</td> <td>https://www.yahoo.com/ </td> <td>03/30/2017</td> </tr> <tr> <th>Column1</th> <th> New Column</th> <th>Column3</th> </tr> <tr> <td>John</td> <td>abctd <td> <td>09/30/2019</td> </tr> <tr> <th>Column1</th> <th> New Column2</th> <th>Column3</th> </tr> <tr> <td>Doe</td> <td>abctd </td> <td>06/30/2019</td> </tr> </tbody></table>

Answer 1

像这样使用 object 是可能的，它会起作用，用这个 js 代码替换你的 js 代码：（这是区分大小写的）

const obj = {
  'Apple':'ABC',
};
function myFunction() {
  let userInput = document.getElementById("myInput").value;
  if(obj[userInput]) userInput = obj[userInput];
  userInput = userInput.toUpperCase();
  const tableRows = document.querySelectorAll("table tr");
  for (let i = 0; i < tableRows.length; i++) {
    const rowTextContent = tableRows[i].innerText.toUpperCase();
    tableRows[i].style.display = rowTextContent.toUpperCase().includes(userInput) ? "" : "none";
  }
}

编辑：你的数组的结构是什么？ 我将修改数组的代码。

Answer 2

假设您要的是直接在 html 中将“关键字”与特定的<tr>标签相关联，那么最符合标准的方法可能是使用data attributes 。

例如

<tr data-keywords="Apple anotherkeyword">
<td>John</td>
<td>abctd </td>
<td>09/30/2019</td>
</tr>

然后检查它：

for (let i = 0; i < tableRows.length; i++) {
    const rowTextContent = tableRows[i].innerText + tableRows[i].dataset.keywords;
    tableRows[i].style.display = 
        rowTextContent.toUpperCase().includes(userInput) ?  "" : "none";
}

Answer 3

您可以使用HTML 5 数据属性将关键字“隐藏”到它们所属的行中。

<tr>的 HTML 会变成这样：

<tr data-keyword="Apple">
    ....
</tr>

下一步是编写一些 JS 代码来使用tableRow.dataset.keyword使用数据属性的内容。

这是您的代码，扩展了data-keyword=属性和匹配的 JS 代码以在搜索时使用它：

 function myFunction() { const userInput = document.getElementById("myInput").value.toUpperCase(); const tableRows = document.querySelectorAll("table tr"); for (let i = 0; i < tableRows.length; i++) { const isKeywordMatch = tableRows[i].dataset.keyword?.toUpperCase().includes(userInput); const isTextMatch = tableRows[i].innerText.toUpperCase().includes(userInput); tableRows[i].style.display = isKeywordMatch || isTextMatch? "": "none"; } }

 .keyword { display: none; } table.table_brdr td { padding: 8px 10px; border: none; } table.table_brdr th { background-color: #a6a6a6; color: black; } tr:nth-of-type(odd) { background-color#D3D3D3; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 20%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; }

 <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search forms list" title="Search forms list"></p> <table class="table_brdr" id="myTable"> <tbody> <tr> <th>Column1</th> <th><strong>Column2</strong></th> <th>Column3</th> </tr> <tr data-keyword="Apple"> <td>abc</td> <td>xyz</td> <td>03/30/2017</td> </tr> <tr> <td>test12</td> <td>https://www.yahoo.com/ </td> <td>03/30/2017</td> </tr> <tr> <th>Column1</th> <th>New Column</th> <th>Column3</th> </tr> <tr> <td>John</td> <td>abctd</td> <td>09/30/2019</td> </tr> <tr> <th>Column1</th> <th>New Column2</th> <th>Column3</th> </tr> <tr> <td>Doe</td> <td>abctd </td> <td>06/30/2019</td> </tr> </tbody> </table>

PS - 我还修复了 HTML 代码中的一些错误：

• <strong>没有匹配的结束标记
• 在一个地方有一个<td> </td>
• 你有</tbody>但没有<tbody> 。