CODEWITHSUNDEEP
javascripthtmlcss
Saad Khan
Saad Khan

Reputation: 25

Toggle with button in table not working

I have a table that looks like this: enter image description here

I want to click the button and toggle a row that spans the 4 columns. However, I get a small box that spans one column:

enter image description here

As you can see the second picture shows that there is one box that toggles and results in the distortion of the existing table. I just want a row that pops up below.

HTML code: 

    <table class="table table-striped table-hover">
      <tbody>
        <tr >
          <tr>
            <td class="client-avatar"><img alt="image" src="img/a2.jpg" </td>
            <td >Anthony Jackson</td>
            <td> Tellus Institute</td>
            <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction()"><i class="fa fa-paste"></i> </button> </td>
         </tr>
         </tr>
         <tr id="togglee">
            <td > File 1 </td>
         </tr>
         <tr id="togglee">
            <td > File 2 </td>
         </tr>

Javascript:

    <script>
    function myFunction() {
        var x = document.getElementById('togglee');
        if (x.style.display === 'none') {
            x.style.display = 'table';
        } else {
            x.style.display = 'none';
        }
    }
</script>

Upvotes: 0

Views: 1528

Answers (2)

Alexander Higgins
Alexander Higgins

Reputation: 6915

First you have some invalid HTML. You can't nest a <tr> inside of a tr>`.

Second your element ids should be unique. If you want to use togglee multiple times make it a class not and id.

Third as @Aurel pointed out use the colspan on a td to specify how many columns it should span.

Fourth, if you want multiple files to display per button click, group them into a single row.

Fifth, you should be using display: table-row on your row not display: block

Lastly, you should be finding the row relative to your button:

button {
  min-height: 20px;
  min-width: 50px;
}

.togglee {
  display: none;
}

.togglee td {
  width: 500px;
}

table,
td {
  border: 1px solid black;
}
<table class="table table-striped table-hover">
  <col width=100><col width=100><col width=100><col width=100>
  <tbody>
    <tr>
      <td class="client-avatar"><img alt="image" src="img/a2.jpg"> </td>
      <td> Anthony Jackson</td>
      <td> Tellus Institute</td>
      <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction(this)"><i class="fa fa-paste"></i> </button> </td>
    </tr>
    <tr class="togglee" >
      <td colspan="4">
        <div>File 1</div>
        <div>File 1</div>
      </td>
    </tr>
    <tr>
      <td class="client-avatar"><img alt="image" src="img/a2.jpg"> </td>
      <td> Roon Lindsay</td>
      <td> Prion Limitied</td>
      <td><button class="btn btn-outline btn-info  dim" type="button" onclick="myFunction(this)"><i class="fa fa-paste"></i> </button> </td>
    </tr>
    <tr class="togglee">
      <td colspan="4" >
        <div>File 1</div>
        <div>File 2</div>
      </td>
    </tr>
  </tbody>
</table>

<script>
  function myFunction(el) {

    var parent = el.parentNode;
    var grandParent = parent.parentNode;
    var x = grandParent.nextElementSibling;
    //console.log(sib);

    if (!x.style.display || x.style.display === 'none') {
      x.style.display = 'table-row';
    } else {
      x.style.display = 'none';
    }
  }
</script>

Upvotes: 1

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7981

You need to specify column span for the <td>:

<td colspan="4">File 1</td>

This means the <td> should span 4 columns instead of 1. You can of course have other <td> elements, e.g. a pair with colspan="2", etc.

Upvotes: 0

Related Questions