Get tr from inside element

Question

Here is a simple HTML code:

<html>
    <head>
    </head>
    <body>
    <input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
    <input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
    <input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
    <table>
     <tr>
      <details class="mainDetails">
       <summary><b>First Summary</b></summary>
       <ul>
        <details>
         <summary><b>Groups</b></summary>
         <ul>
          <li>group A of First</li>
          <li>group B of First</li>
         </ul>
        </details>
        <details>
         <summary><b>First People</b></summary>
         <ul>
          <li>John</li>
          <li>Mark</li>
         </ul>
        </details>
       </ul>
      </details>
     </tr>
     <tr> 
      <details class="mainDetails">
       <summary><b>Second Summary</b></summary>
       <ul>
        <details>
         <summary><b>Groups</b></summary>
         <ul>
          <li>group A of Second</li>
          <li>group B of Second</li>
          <li>group C of Second</li>
         </ul>
        </details>
        <details>
         <summary><b>Second People</b></summary>
         <ul>
          <li>Alex</li>
         </ul>
        </details>
       </ul>
      </details>
     </tr>
    </table>
    
    <script>
    
     function myFunction(){
      var pathString = document.getElementById('pathText').value;
      var summariesElements=document.getElementsByTagName("summary");
      for(i=0;i<summariesElements.length;i++){
       if(summariesElements[i].innerHTML.indexOf(pathString) !== -1){
        if(summariesElements[i].parentElement.className === "mainDetails"){
         alert(summariesElements[i].parentElement.className);
         summariesElements[i].parentElement.style.display = "none"; 
        }
       }
      }
     }
    </script>
    </body> 
    </html>

I want to hide the tr element from details which summary consists String from pathText input. In my code I know how to get mainDetails element by using myFunction() to hide it.

I tried to add class="trClass" and modify this function to get tr element and use display="none". I use something like:

function myFunction(){
        var pathString = document.getElementById('pathText').value;
        var summariesElements=document.getElementsByTagName("summary");
        for(i=0;i<summariesElements.length;i++){
            if(summariesElements[i].innerHTML.indexOf(pathString) !== -1){
                alert(summariesElements[i].parentElement.parentElement.className);
                if(summariesElements[i].parentElement.parentElement.className === "trClass"){
                summariesElements[i].parentElement.parentElement.style.display = "none"; 
                }
            }
        }
    }

But there is a problem because summariesElements[i].parentElement.parentElement doesn't return the tr element, it returns just body.

How can I change my code and use it to hide just tr from my table?

I think this will help you https://stackoverflow.com/a/28406890/3425489 — Shantaram Tupe, Jul 14 '17 at 10:07
you missed the tag in your tag, bcoz of that your details tag is rendered outside of the table if you look at in developer tool and you are getting body tag. Just add tag then you will get proper parentElement.Refere https://jsfiddle.net/5eg5a486/ — Hemant D, Jul 14 '17 at 10:11
Agree with @HemantD . He pointed out before me, so credit goes to him. — Amit Bhagat, Jul 14 '17 at 10:43

score 0 · Answer 1 · edited Jul 14 '17 at 10:58

You have missed td (column) element for row. A row must have at least one column.

<tr>
<td>
<!-- content goes here -->
</td>
</tr>

Also, to get row reference instead of

summariesElements[i].parentElement.parentElement

you can use

summariesElements[i].closest('tr')

Please check JsFiddle demonstrating achieving same using jQuery

Here is fix of your coding, mainly adding td tag

<html>

<head>
</head>

<body>
  <input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
  <input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
  <input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
  <table>
    <tr>
      <td>
        <details class="mainDetails">
          <summary><b>First Summary</b></summary>
          <ul>
            <details>
              <summary><b>Groups</b></summary>
              <ul>
                <li>group A of First</li>
                <li>group B of First</li>
              </ul>
            </details>
            <details>
              <summary><b>First People</b></summary>
              <ul>
                <li>John</li>
                <li>Mark</li>
              </ul>
            </details>
          </ul>
        </details>
      </td>
    </tr>
    <tr>
      <td>
        <details class="mainDetails">
          <summary><b>Second Summary</b></summary>
          <ul>
            <details>
              <summary><b>Groups</b></summary>
              <ul>
                <li>group A of Second</li>
                <li>group B of Second</li>
                <li>group C of Second</li>
              </ul>
            </details>
            <details>
              <summary><b>Second People</b></summary>
              <ul>
                <li>Alex</li>
              </ul>
            </details>
          </ul>
        </details>
      </td>
    </tr>
  </table>

  <script>
    function myFunction() {
      var pathString = document.getElementById('pathText').value;
      var summariesElements = document.getElementsByTagName("summary");
      for (i = 0; i < summariesElements.length; i++) {
        if (summariesElements[i].innerHTML.indexOf(pathString) !== -1) {
          if (summariesElements[i].parentElement.className === "mainDetails") {
            //alert(summariesElements[i].parentElement.className);
            summariesElements[i].parentElement.style.display = "none";
          }
        }
      }
    }
  </script>
</body>

</html>

JGFMK · Answer 2 · 2017-07-14T11:39:57.750

Try this:
I've fixed the mark up to include td elements, and closing script.
I've also used querySelector/querySelectorAll which adds a bit more flexibility to getting DOM nodes.
Check out the CSSSelectors docs, that these commands use.
So you can in effect do things like find by id, class, 'tag A' within 'tag B', direct descendants, etc.
Here it is in JSFiddle

<html>
<head>
</head>
<body>
<input id="pathText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search" onclick="myFunction()"><br>
<table>
    <tr><td>
        <details class="mainDetails">
            <summary><b>First Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of First</li>
                        <li>group B of First</li>
                    </ul>
                </details>
                <details>
                    <summary><b>First People</b></summary>
                    <ul>
                        <li>John</li>
                        <li>Mark</li>
                    </ul>
                </details>
            </ul>
        </details>
    </td></tr>
    <tr><td>    
        <details class="mainDetails">
            <summary><b>Second Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of Second</li>
                        <li>group B of Second</li>
                        <li>group C of Second</li>
                    </ul>
                </details>
                <details>
                    <summary><b>Second People</b></summary>
                    <ul>
                        <li>Alex</li>
                    </ul>
                </details>
            </ul>
        </details>
    </td></tr>
</table>

<script>

    function myFunction(){
        var inputValue = document.querySelector('#pathText').value;
        var trElements=document.querySelectorAll("tr");
        for(i=0;i<trElements.length;i++){
            var summaryText = trElements[i].querySelector("b").innerText
            if (inputValue === summaryText) {
               trElements[i].style.display = "none";
            }
        }
    }
</script>
</body>
</html>

Get tr from inside element

2 Answers2