Hide current table row inline using javascript

Question

I have the following html that I cannot modify. (It is being auto-generated)

<table>
  <tbody>
    <tr>
      <th>UserName</th>
      <td>Bob</td>
    </tr>
    <tr>
      <th>Password</th>
      <td>Fred</td>
    </tr>
  </tbody>
</table>

This would display:

UserName  Bob
Password  Fred

However, I can insert code inside the td area. I would like to hide the parent row using javascript or css.

Example

For example, if I wanted to hide the second row I can insert javascript:

<table>
  <tbody>
    <tr>
      <th>UserName</th>
      <td>Bob</td>
    </tr>
    <tr>
      <th>Password</th>
      <td>Fred <script type="text/javascript">document.parentrow.hide();</script> </td>
    </tr>
  </tbody>
</table>

And then it should just display

UserName  Bob

Notes

The function document.parentrow.hide(); does not work but it is just to show an example of what I am looking for. I would like a function that hides the current row associated with that td.
I cannot add custom class or id to the tr tags since I have no control over that portion of the html.
I did take a look at the following link How may I reference the script tag but it is just a general topic. It does not have the answer to my question regarding table rows.

Robert Smith · Answer 1 · 2023-03-29T19:53:43.217

It was very easy with the document closest tag as follows. I just added this to the corresponding td tag:

<td>Fred
  <script type="text/javascript">
    var myscript = document.currentScript;
    var myrow = myscript.closest('tr');
    myrow.hidden = true;
  </script>
</td>

<table>
  <tbody>
    <tr>
      <th>UserName</th>
      <td>Bob</td>
    </tr>
    <tr>
      <th>Password</th>
      <td>Fred
        <script type="text/javascript">
          var myscript = document.currentScript;
          var myrow = myscript.closest('tr');
          myrow.hidden = true;
        </script>
      </td>
    </tr>
  </tbody>
</table>

Hide current table row inline using javascript

1 Answers1