HTML Table using Javascript Arrays

Question

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

Please explain what a "keyword" is in the context of what you want, or how you plan to determine which keywords go to which rows if you can't modify the html. Are the keywords synonyms of other search strings? Is it something else? — Sean Sutherland
– Sean Sutherland, Commented Jul 26, 2022 at 20:52

proseosoc · Accepted Answer · 2022-07-26 20:58:06Z

1

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.

edited Jul 26, 2022 at 20:58

answered Jul 26, 2022 at 20:51

proseosoc

1,39416 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter B · Accepted Answer · 2022-07-26 20:42:32Z

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

Sean Sutherland · Accepted Answer · 2022-07-26 20:50:02Z

0

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

edited Jul 26, 2022 at 20:50

answered Jul 26, 2022 at 20:35

Sean Sutherland

5053 silver badges18 bronze badges

2 Comments

magicsinger Over a year ago

Thanks. This is great, however I am not able to update HTML table (its automatically generated through Content Management System). So was wondering if there is a way to use JS to update the search results.

Sean Sutherland Over a year ago

You need to edit your question to better explain your requirements, desired results, and constraints, then. Your question, as it stands, does not explain what you are asking for, and even with this comment we don't have enough information to answer it. For example, how do you expect to tell which keywords go to which rows of the table? Because with the information you've given us, it's impossible to tell without modifying the html.

Collectives™ on Stack Overflow

HTML Table using Javascript Arrays

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related