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> 。