CODEWITHSUNDEEP
javascripthtmljquerycss
Dazzler
Dazzler

Reputation: 382

Filter table based on href attribute value in <a> tag and show parent row when child row matches the search value

I am trying to search and filter the below table based on the href value. My code works for all the columns that are displayed in the table and shows the corresponding row but does not work when I search for the string in the href attribute.

For example, when I search for Google in the search bar, I need to show the row that contains the href value of https://www.google.com.

I have tried looking for a solution everywhere but couldn't find it. Can anyone help me or point me to where I could find the answer to this?

Also, is there a way to assign parent row and child row to the table without using the id attribute so that when the search and filter returns a child row I want to show the corresponding parent row as well?

My code on jsfiddle - JsFiddle

HTML :

<body>
  <div>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for website..">
    <button type="submit">Search</button>
  </div>

  <table border="0" id="myTable">
    <thead hidden>
      <tr>
        <th>Name</th>
        <th>URL</th>
      </tr>
    </thead>

    <tbody>
      <tr class="header clickable-row" style="cursor:pointer" data-toggle="true">
        <td colspan="2">
          <label style="cursor:pointer">Parent Row 1</label>
        </td>
      </tr>
      <tr class="hide collapse" style="display:none">
        <td>
          <h4>Column1</h4>
        </td>
        <td>
          <a class="connectorlink" href="https://google.com" target="_blank">website</a>
        </td>
      </tr>
      <tr class="hide collapse" style="display:none">
        <td>
          <h4>Column1</h4>
        </td>
        <td>
          <a class="connectorlink" href="https://yahoo.com" target="_blank">website</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

JavaScript

$(document).ready(function() {
  $('tr.header').click(function() {
    $(this).find('span').text(function(_, value) {});
    $(this).nextUntil('tr.header').slideToggle(100, function() {});
  });
});

function myFunction() 
{
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  
  // Loop through all table rows, and hide those that don't match the search query
  for (i = 0; i < tr.length; i++) 
  {
   td = tr[i];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) 
      {
        tr[i].style.display = "";
      } 
      else 
      {
        tr[i].style.display = "none";
      }
    }
  }
}

CSS

table,
tr,
td,
th {
  border-collapse: collapse;
}

h4,
{
  margin: 0;
  padding: 0;
  font-family: Inter;
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}


label {
  padding: 10px 10px 10px 12px;
}

.tabledesign {
  width: 900px;
  border-collapse: separate;
  border-spacing: 0 15px;
  margin: 50px auto;
}

th {
  background: #e5e5e5;
  color: rgba(0, 0, 0, 0.84);
  font-weight: bold;
}

td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

#myInput {
  display: flex;
  background: #FFFFFF;
  font-family: Inter;
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 795px;
  /* Full-width */
  height: 46px;
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

* {
  box-sizing: border-box;
}

Upvotes: 0

Views: 34

Answers (1)

Brett Donald
Brett Donald

Reputation: 14132

A simple fix would be to search the innerHTML instead of textContent/innerText.

txtValue = td.innerHTML;

Upvotes: 1

Related Questions