HTML Table using Javascript Arrays-CodePudding

Is there a way to search a table using keywords through javascript arrays? My search only finds the form based on the wording in the existing table. Would it be possible to add keywords to display certain results? For example, if I search for "Apple", it should display the same results as if I searched for "ABC". See my table below.

Note that I am not able to edit HTML table (add class to it) as the table is auto generated with Content Management System (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  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>

CodePudding user response：

Using object is possible like this, it will work, replace your js code with this js code: (This is case sensitive)

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

EDIT: What is the structure of your array? I will modify the code for array.

CodePudding user response：

You can use HTML 5 Data Attributes to "hide" the keywords into the rows that they belong to.

The HTML for a <tr> would become like this:

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

The next step is to write some JS code to use the contents of the data attribute using tableRow.dataset.keyword.

Here is your code, extended with the data-keyword= attribute and matching JS code to use it when searching:

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  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 - I also fixed some errors in your HTML code:

<strong> without a matching closing tag
at one place there is a <td> where a </td> should be
you had </tbody> but not <tbody>.

CodePudding user response：

Assuming what you're asking for is associating a "keyword" with a specific <tr> tag directly in html, the most standards-compliant way to do this is probably to use data attributes.

e.g.

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

Then check it like:

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