社区首页 >问答首页 >使用Javascript数组的HTML表

问使用Javascript数组的HTML表
EN

Stack Overflow用户

提问于 2022-07-26 12:19:14

回答 3查看 59关注 0票数 0

有没有方法通过javascript数组使用关键字搜索表？我的搜索只是根据现有表格中的措辞找到表格。是否可以添加关键字来显示某些结果？例如，如果我搜索"Apple"，它应该显示与搜索"ABC“相同的结果。看我下面的桌子。

请注意，我无法编辑HTML表(添加类)，因为该表是由(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>

css

arrays

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-07-26 12:51:41

使用对象是可能的，它将工作，用以下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";
  }
}

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

票数 1

Stack Overflow用户

发布于 2022-07-26 12:42:32

可以使用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>。

票数 1

Stack Overflow用户

发布于 2022-07-26 12:35:24

假设您所要求的是在html中将“关键字”与特定的<tr>标记直接关联，那么最符合标准的方法可能是使用数据属性。

例如：

<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";
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73129302

复制

相似问题

问使用Javascript数组的HTML表
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript数组的HTML表EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript数组的HTML表
EN