Unexpected behaviour while looping a table

[TechnoDiver]

Hi Freaks, the weekend is upon us again. I wish you all well. I have an issue I've been working on today and have hit a mental roadblock. Hoping someone with the time and will will talk me through it.

I'm creating a table while looping through an API array and I've hit a couple snags. Here is the repeated HTML ->

$html = "
    <tr class='mt-2'>
        <td>{$rank}.</td>
        <td><img src='{$image}' height='75' width='75'></td>
        <td>{$name}</td>
        <td class='bold'>\${$final_worth}B</td>
        <td class='{$class}'>\${$last_change}</td>
        <td>{$country}</td>
        <td>{$source}</td>
        <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td>
    </tr>
    <tr >
        <div id='details'>lorem fucking ipsum wahoo baby</div>
    </tr>

    ";

Everything was going as expected until I went to add the second row (div#details).

There's actually 2 issues at play here - the first is how I make each button/div#details connected so button1 only effects div1 etc.

I can't tackle that one yet though, because right now when any button is clicked div#details shows up above the table header rather than underneath the previous row.

So until I have the positioning correct I can't really tackle the js functionality. Can someone please tell me why the <tr><div#details> is not appearing underneath it's previous row? The js code is as follows ->

<script>
  var cnt = <?php echo $cnt; ?>;
  function showDetails(cnt) {
      var details = "details";
      var x = document.getElementById(details);
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
    
</script>

I know the code is a mess right now. It's kind of shameful lol but like I said I can't really do more with it until I can figure out why that table row isn't positioning properly

[Barand]

6 minutes ago, TechnoDiver said:

    <tr >
        <div id='details'>lorem fucking ipsum wahoo baby</div>
    </tr>

try changing that to

   <tr >
        <td colspan='8' id='details'>lorem fucking ipsum wahoo baby</td>
    </tr>

If it ain't in a cell, it's rejected from the table, which is why it appears above.

[TechnoDiver]

11 minutes ago, Barand said:

try changing that to

   <tr >
        <td colspan='8' id='details'>lorem fucking ipsum wahoo baby</td>
    </tr>

If it ain't in a cell, it's rejected from the table, which is why it appears above.

I was actually just working on exactly this. I had a revelation as I was leaving the site from my OP. What I'm actually working on is that it's not working and I don't know why ->

$html = "
  <tr class='mt-2'>
      <td>{$rank}.</td>
      <td><img src='{$image}' height='75' width='75'></td>
      <td>{$name}</td>
      <td class='bold'>\${$final_worth}B</td>
      <td class='{$class}'>\${$last_change}</td>
      <td>{$country}</td>
      <td>{$source}</td>
      <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td>
  </tr>
  <tr >
      <td colspan='8' id='details{$cnt}' style='display: none'>lorem fucking ipsum wahoo baby - {$cnt}</td>
  </tr>

  ";

but even with the colspan it's only populating it into the first column.

On the brighter side, I got the js functionality working lol

but for some reason it's not spanning the 8 columns. Any ideas??

[Barand]

How do you know with the display: none ?

If I supply some dummy values, remove the display:none and add borders to the table so I can see what's happening...

$rank = $image = $name = $final_worth = $country = $source = $cnt = $class = $last_change = 'X';

$html = "
  <tr class='mt-2'>
      <td>{$rank}.</td>
      <td><img src='{$image}' height='75' width='75'></td>
      <td>{$name}</td>
      <td class='bold'>\${$final_worth}B</td>
      <td class='{$class}'>\${$last_change}</td>
      <td>{$country}</td>
      <td>{$source}</td>
      <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td>
  </tr>
  <tr >
      <td colspan='8' id='details{$cnt}' >lorem fucking ipsum wahoo baby - {$cnt}</td>
  </tr>

  ";

I see

[TechnoDiver]

9 minutes ago, Barand said:

How do you know with the display: none ?

ok, I was talking about after I hit the button, in the script that changes it to block instead of none.

funnily enough, when I take it out it displays properly (colspan=8)

So, if I take out display: none the second row spans the 8 cols. BUT they're visible on page load and I don't want that.

When I have display: none there they obviously don't appear on page load and they DO appear after I hit the button, except when they do appear it pushes everything from the top row over and only populates the first col

as in the SS above. Why is this? here's the js again for reference ->

<script>
        
function showDetails(cnt) {
  var details = "details"+cnt;
  var x = document.getElementById(details);
  if (x.style.display === "none") {
      x.style.display = "block";
  } else {
      x.style.display = "none";
  }
}
</script>

I can't get my head around why this is happening.

[Barand]

If I put the style='display: none' back, I get

Apart from that one inline style I am using no css, so something in yours could be screwing up.

[TechnoDiver]

9 minutes ago, Barand said:

If I put the style='display: none' back, I get

what happens when you hit the button?

Here's my entire table element ->

<table class="col-lg-12 mb-5">
  <tr class="bg-color-fourth mb-2">
      <th class="ps-1">Rank</th>
      <th></th>
      <th>Name</th>
      <th>Total net worth</th>
      <th>Last change</th>
      <th>Country</th>
      <th>Industry</th>
      <th></th>
  </tr>

  <?php 
      $cnt = 0;
      while($cnt<10) {
          $leech = $leeches[$cnt];
          $name = $leech->personName;
          $image = explode("//", $leech->squareImage);
          $image[0] = "https://";
          $image = implode("", $image);
          $age = "?";
          $final_worth = (int)($leech->finalWorth/1000);
          $last_change = (int)($leech->finalWorth - $leech->estWorthPrev)/1000;
          if($leech->estWorthPrev > $leech->finalWorth) {
              $class = "red";
          } elseif($leech->estWorthPrev == $leech->finalWorth) {
              $class = "black";
          } else {
              $class = "green";
          }
          $source = $leech->source;
          $country = $leech->countryOfCitizenship;

          $source = ucwords($leech->source);
          $rank = $cnt + 1;
          $html = "
              <tr class='mt-2'>
                  <td>{$rank}.</td>
                  <td><img src='{$image}' height='75' width='75'></td>
                  <td>{$name}</td>
                  <td class='bold'>\${$final_worth}B</td>
                  <td class='{$class}'>\${$last_change}</td>
                  <td>{$country}</td>
                  <td>{$source}</td>
                  <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More &nbsp;<i class='fa fa-arrows-v' aria-hidden='true'></i></button>
                  </td>
              </tr>
              <tr >
                  <td colspan='8' id='details{$cnt}' style='display: none'>lorem fucking ipsum wahoo baby - {$cnt}</td>
              </tr>

              ";
          $cnt++;
          echo $html; 
      }     
  ?>
 </table>

It uses no css other than that inline style and adding some color to positive/negative values. I have no idea what could cause it like this.

Have you tried to use the JS to see what happens for you after you click the button??

[Barand]

Instead of changing the display to "block" when you click the button, set it to "display: table-cell;"

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript'>
    function showDetails(cnt) {
        
        $(".more").css("display", "none");            // hide all
        
        var details = "details"+cnt;
        var x = document.getElementById(details);
        if (x.style.display === "none") {
          x.style.display = "table-cell";             // display requested one
        } else {
          x.style.display = "none";
        }
    }


</script>

 

Edited October 9, 2021 by Barand

[Barand]

FYI

If you have a div inside the 8-col td, then it works with display:block

  <tr >
      <td colspan='8'> 
          <div class='more' id='details{$cnt}' >lorem fucking ipsum wahoo baby - {$cnt}</div>
      </td>
  </tr>

 

[TechnoDiver]

5 minutes ago, Barand said:

If you have a div inside the 8-col td, then it works with display:block

Interesting, thank you

[kicken]

For future reference, rather changing the value of display directly like that, it's easier to just add/remove a class which will apply display: none;

Doing it that way, you don't have to worry about whether it should be 'block', 'inline', 'table-cell', 'grid', etc.  You just apply display: none; with a class to hide it, then remove the class so display: none; gets removed and it falls back to whatever the previous value was.