Expandable HTML Table generated from PHP

Question

$(document).ready(function() { $('#inttable').on('click', 'tr.parent', function(){
  console.log('running!!!!')
  $(this).closest('tbody').toggleClass('open');
})});

.jumbotron {
 background-color: #e6f5ff !important;
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #4db8ff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ccffff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #ffffff;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.navbar-custom {
    color: #0099ff;
    background-color: #0099ff;
    position: fixed;
    width: 100%;
}
.btn {
    background-color: #b3e0ff
}
.tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.tasks span{
    font-weight: bold;
}
.tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
.tasks a{
    color: #000;
    text-decoration: none;
    border:none;
}
.tasks a:hover{
    border-bottom: dashed 1px #0088cc;
}
.tasks label{
    display: block;
    text-align: center;
}
.one {
    width: 15%;
    height: 200px;
    float: left;
}
.two {
    margin-left: 15%;
    height: 200px
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute;
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:#a3a3c2;
  padding:3px;
  color:#000033;
  top:20px;
  left:20px;
 width:150px;
}

.CellWithComment:hover span.CellComment{
  display:block;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
.parent ~ .cchild {
  display: none;
}
.open .parent ~ .cchild {
  display: table-row;
}
.parent {
  cursor: pointer;
}
tbody {
  color: #212121;
}
.open {
  background-color: #e6e6e6;
}

.open .cchild {
  background-color: #999;
  color: white;
}
.parent > *:last-child {
  width: 30px;
}
.parent i {
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  margin: -.5rem;
  padding: .5rem;

}
.open .parent i {
  transform: rotate(180deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />


<div id="intdetail" class="tabcontent" style="display: block;">
  <div id="ASAintdetail">
  <table id="inttable" class="table">
<thead>
<tr>
<th>Hostname</th>
<th>IP</th>
<th>Context</th>
<th>Status</th>
<th>Status Protocol</th>
<th>VRF</th>
<th>MAC</th>
<th>MTU</th>
<th>Packets In</th>
<th>Packets In Bytes</th>
<th>Packets Out</th>
<th>Packets Out Bytes</th>
<th>Packets Dropped MTH-DC2-ASA</th>
<th><button class="tablinks" onclick="back(level=3, model='ASA5585-SSP-40')"><span class="glyphicon glyphicon-backward"></span></button></th>
<th></th>
</tr>
</thead>
<tbody><tr><td></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN1" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC1-VE06-MANAGEMENT</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">CUST-OUTSIDE</td>
<td id="MAC">a239.3000.0066</td>
<td id="MTU">1500</td>
<td id="PacketsIn">12629258</td>
<td id="PacketsInBytes">991136931</td>
<td id="PacketsOut">7871</td>
<td id="PacketsOutBytes">220388</td>
<td id="PacketsDropped">11417431</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN2" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC1-VE06-MANAGEMENT</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">CUST-OUTSIDE</td>
<td id="MAC">a239.3000.0066</td>
<td id="MTU">1500</td>
<td id="PacketsIn">12629714</td>
<td id="PacketsInBytes">991172551</td>
<td id="PacketsOut">7871</td>
<td id="PacketsOutBytes">220388</td>
<td id="PacketsDropped">11417822</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN3" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC1-VE06-MANAGEMENT</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-FW-TRANS</td>
<td id="MAC">a239.3000.0086</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11436598</td>
<td id="PacketsInBytes">848480108</td>
<td id="PacketsOut">0</td>
<td id="PacketsOutBytes">0</td>
<td id="PacketsDropped">11435597</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN4" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC1-VE06-MANAGEMENT</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-FW-TRANS</td>
<td id="MAC">a239.3000.0086</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11436989</td>
<td id="PacketsInBytes">848509108</td>
<td id="PacketsOut">0</td>
<td id="PacketsOutBytes">0</td>
<td id="PacketsDropped">11435988</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN5" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-INTERNET-ACCESS</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">INTERNET-ACCESS</td>
<td id="MAC">a239.3000.001b</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11853118</td>
<td id="PacketsInBytes">881624718</td>
<td id="PacketsOut">8688</td>
<td id="PacketsOutBytes">352688</td>
<td id="PacketsDropped">11844128</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN6" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-INTERNET-ACCESS</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">INTERNET-ACCESS</td>
<td id="MAC">a239.3000.001b</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11853522</td>
<td id="PacketsInBytes">881654788</td>
<td id="PacketsOut">8688</td>
<td id="PacketsOutBytes">352688</td>
<td id="PacketsDropped">11844532</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN7" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">CUST-UC-APPS</td>
<td id="MAC">a239.3000.00ad</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11311665</td>
<td id="PacketsInBytes">838522862</td>
<td id="PacketsOut">3</td>
<td id="PacketsOutBytes">84</td>
<td id="PacketsDropped">11311657</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN8" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">CUST-UC-APPS</td>
<td id="MAC">a239.3000.00ad</td>
<td id="MTU">1500</td>
<td id="PacketsIn">11312052</td>
<td id="PacketsInBytes">838551542</td>
<td id="PacketsOut">3</td>
<td id="PacketsOutBytes">84</td>
<td id="PacketsDropped">11312044</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN9" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-TRANSIT</td>
<td id="MAC">a239.3000.00a9</td>
<td id="MTU">1500</td>
<td id="PacketsIn">2214871</td>
<td id="PacketsInBytes">110733736</td>
<td id="PacketsOut">308</td>
<td id="PacketsOutBytes">8624</td>
<td id="PacketsDropped">2213660</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN10" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-TRANSIT</td>
<td id="MAC">a239.3000.00a9</td>
<td id="MTU">1500</td>
<td id="PacketsIn">2214947</td>
<td id="PacketsInBytes">110737536</td>
<td id="PacketsOut">308</td>
<td id="PacketsOutBytes">8624</td>
<td id="PacketsDropped">2213736</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN11" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-TRANSIT</td>
<td id="MAC">a239.3000.00b1</td>
<td id="MTU">1500</td>
<td id="PacketsIn">2213663</td>
<td id="PacketsInBytes">110683084</td>
<td id="PacketsOut">3</td>
<td id="PacketsOutBytes">84</td>
<td id="PacketsDropped">2213660</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN12" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE03-CUST3</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">MGMT-TRANSIT</td>
<td id="MAC">a239.3000.00b1</td>
<td id="MTU">1500</td>
<td id="PacketsIn">2213739</td>
<td id="PacketsInBytes">110686884</td>
<td id="PacketsOut">3</td>
<td id="PacketsOutBytes">84</td>
<td id="PacketsDropped">2213736</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody><tbody><tr class="parent">
<td id="HN13" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE04-CUST1</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">ASA-MGMT</td>
<td id="MAC">a239.3000.006c</td>
<td id="MTU">1500</td>
<td id="PacketsIn">896444</td>
<td id="PacketsInBytes">96034594</td>
<td id="PacketsOut">890396</td>
<td id="PacketsOutBytes">95672736</td>
<td id="PacketsDropped">2</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td id="HN14" value="MTH-DC2-ASA">MTH-DC2-ASA</td>
<td id="IP">10.53.207.207</td>
<td id="Context">DC2-VE04-CUST1</td>
<td id="Status">up</td>
<td id="StatusProtocol">up</td>
<td id="VRF">ASA-MGMT</td>
<td id="MAC">a239.3000.006c</td>
<td id="MTU">1500</td>
<td id="PacketsIn">896476</td>
<td id="PacketsInBytes">96037926</td>
<td id="PacketsOut">890428</td>
<td id="PacketsOutBytes">95676032</td>
<td id="PacketsDropped">2</td>
<td><i class="glyphicon glyphicon-ok-circle" style="color:green;font-size: 20px;"></i></td>
<td colspan="2"></td>
</tr>
</tbody></table></div>
</div>

I am trying to use the code from another stackoverflow thread to produce expandable rows in my table.

The issue i am having is that the CSS does not seen to have an affect on the table which is passed back from PHP, and also the Javascript that opens and closes the rows doesnt seen to run at all.

So the CSS should make the rows with the CSS 'cchild' invisible but on the webpage it is showing.

Could this be because i am trying to run the javascript on a table which is loaded in after by PHP and AJAX?

I have added a console log, but i get nothing in the debug console.

Table PHP:

$tbquery = "select * from ASAintdetail where Hostname = '$dev' AND Model = '$mod' order by Context ASC, VRF ASC, MAC ASC, Time_Stamp ASC;";
  $results = mysqli_query($con, $tbquery);
  $output_string .="<table id=\"inttable\" class=\"table\">\n";
  $output_string .="<thead>\n";
  $output_string .="<tr>\n";
  $output_string .="<th>Hostname</th>\n";
  $output_string .="<th>IP</th>\n";
  $output_string .="<th>Context</th>\n";
  $output_string .="<th>Status</th>\n";
  $output_string .="<th>Status Protocol</th>\n";
  $output_string .="<th>VRF</th>\n";
  $output_string .="<th>MAC</th>\n";
  $output_string .="<th>MTU</th>\n";
  $output_string .="<th>Packets In</th>\n";
  $output_string .="<th>Packets In Bytes</th>\n";
  $output_string .="<th>Packets Out</th>\n";
  $output_string .="<th>Packets Out Bytes</th>\n";
  $output_string .="<th>Packets Dropped $dev</th>\n";
  $output_string .="<th><button class='tablinks' onclick=\"back(level=3, model='$mod')\"><span class='glyphicon glyphicon-backward'></th>\n";
  $output_string .="<th></th>\n";
  $output_string .="</tr>\n";
  $output_string .="</thead>\n";
  $count = 0;
  $class = '';
  $span = '';
  $col = '';
  $x = 0;
  foreach ($results as $table) {
    if ($count >= 1) {
      if ($x == 0) {
        $output_string .="</tbody>";
        $output_string .="<tbody>";
        $class = 'parent';
        $span = '<i class="fa fa-chevron-down">';
      }
      if ($x == 1) {
        $class = 'cchild';
        $col = 'colspan=\'2\'';
      }
      if ($pVRF == $table['VRF'] && $pMAC == $table['MAC']) {
        $x = 1;
      } else {
        $x = 0;
      }
      $output_string .="<tr class='$class'>\n";
      $output_string .="<td id=\"HN$count\" value=\"$pHostname\">$pHostname</td>\n";
      $output_string .="<td id=\"IP\">$pIPAddr</td>\n";
      $output_string .="<td id=\"Context\">$pContext</td>\n";
      $output_string .="<td id=\"Status\">$pStatus</td>\n";
      $output_string .="<td id=\"StatusProtocol\">$pStatusProtocol</td>\n";
      $output_string .="<td id=\"VRF\">$pVRF</td>\n";
      $output_string .="<td id=\"MAC\">$pMAC</td>\n";
      $output_string .="<td id=\"MTU\">$pMTU</td>\n";
      $output_string .="<td id=\"PacketsIn\">$pPacketsIn</td>\n";
      $output_string .="<td id=\"PacketsInBytes\">$pPacketsInBytes</td>\n";
      $output_string .="<td id=\"PacketsOut\">$pPacketsOut</td>\n";
      $output_string .="<td id=\"PacketsOutBytes\">$pPacketsOutBytes</td>\n";
      $output_string .="<td id=\"PacketsDropped\">$pPacketsDropped</td>\n";
      if ($pThreshold == 1) {
        $output_string .="<td><i class=\"glyphicon glyphicon-remove\" style=\"color:red;font-size: 20px;\"></i></td>\n";
      }
      elseif ($pThreshold == 2) {
        $output_string .="<td><i class=\"glyphicon glyphicon-warning-sign\" style=\"color:#ff9900;font-size: 20px;\" ></i></td>\n";
      }
      else {
        $output_string .="<td><i class=\"glyphicon glyphicon-ok-circle\" style=\"color:green;font-size: 20px;\"></i></td>\n";
      }
    }
    $output_string .="<td $col>$span</td>\n";
    $output_string .="</tr>\n";
    $count++;
    $pHostname = $table['Hostname'];
    $pIPAddr = $table['IPAddr'];
    $pContext = $table['Context'];
    $pStatus = $table['Status'];
    $pStatusProtocol = $table['StatusProtocol'];
    $pVRF = $table['VRF'];
    $pMAC = $table['MAC'];
    $pMTU = $table['MTU'];
    $pPacketsIn = $table['PacketsIn'];
    $pPacketsInBytes = $table['PacketsInBytes'];
    $pPacketsOut = $table['PacketsOut'];
    $pPacketsOutBytes = $table['PacketsOutBytes'];
    $pPacketsDropped = $table['PacketsDropped'];
    $pThreshold = $table['Threshold'];
    $class = '';
    $span = '';
    $col = '';
  }

Java Script:

<script>
$('#inttable').on('click', 'tr.parent', function(){
  console.log('running!!!!')
  $(this).closest('tbody').toggleClass('open');
});
</script>

CSS:

.parent ~ .cchild {
  display: none;
}
.open .parent ~ .cchild {
  display: table-row;
}
.parent {
  cursor: pointer;
}
tbody {
  color: #212121;
}
.open {
  background-color: #e6e6e6;
}

.open .cchild {
  background-color: #999;
  color: white;
}
.parent > *:last-child {
  width: 30px;
}
.parent i {
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  margin: -.5rem;
  padding: .5rem;

}
.open .parent i {
  transform: rotate(180deg)
}

Link to the other thread: HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

Any help would be great, been stuck on this for ages

Thanks :)

The CSS doesn't work because it depends on classes and you're not supplying any classes on your HTML output except 1 on your table element. The jQuery doesn't work because you're trying to put an event handler on the element _inttable_ with `$('inttable')` instead of an element with the inttable id. So replace that with `$('#inttable')` — icecub, May 09 '18 at 17:07
@icecub Im giving the rows a class through the PHP variable $class inside the foreach loop. Just tried the change you sugested but sadly no change. The Javascript is still not running — Kristian Carbonaro, May 09 '18 at 17:12
@mplungjan cheers that has help with the CSS issue :) just gotta get the javascript working — Kristian Carbonaro, May 09 '18 at 17:14
Please click `<>` and replace the php with HTML rendered. The script runs if you change to #inttable and change the class — mplungjan, May 09 '18 at 17:17
Well this is where you create your table: `$output_string .=" — icecub, May 09 '18 at 17:17
Click <>? Made the changes on the question and on my server but still not getting the javascript to run — Kristian Carbonaro, May 09 '18 at 17:24
@icecub also added your document.ready function but no luck. Do you need a tbody.open? The guide i am following doesnt have it and their code works on stackoverflow — Kristian Carbonaro, May 09 '18 at 17:25
Edit the question. Click the [<>] button, add HTML and script and css in the correct panels and add jQUery. This is not a PHP question — mplungjan, May 09 '18 at 17:26
@mplungjan ah yeah with the changes it works on snippet tool, but i dont understand why it isnt working on my server — Kristian Carbonaro, May 09 '18 at 17:44
@mplungjan i completely scripted the page and used the html from the snippet and it work. I then swaped the html with the AJAX i was using before to the PHP, this stopped the javascript from working — Kristian Carbonaro, May 09 '18 at 17:55
Ah brilliant, its working now. I moved the javascript from the html to the PHP generated html and it works! Thanks @mplungjan and icecub for your help :) — Kristian Carbonaro, May 09 '18 at 17:59

Expandable HTML Table generated from PHP

0 Answers0