Расширяемая HTML-таблица, сгенерированная из PHP - PullRequest
Новая
       1

Расширяемая HTML-таблица, сгенерированная из PHP

0 голосов
/ 09 мая 2018 

$(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>

Я пытаюсь использовать код из другого потока stackoverflow для создания расширяемых строк в моей таблице.

Проблема, с которой я столкнулся, заключается в том, что CSS не оказывает влияния на таблицу, которая передается обратно из PHP, а также на Javascript, который открывает и закрывает строки, которые вообще не работают.

Таким образом, CSS должен сделать строки с cchild CSS невидимыми, но на веб-странице, которую он показывает.

Может ли это быть потому, что я пытаюсь запустить javascript для таблицы, которая загружается после PHP и AJAX?

Я добавил консольный журнал, но ничего не получаю в консоли отладки.

Таблица 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)
}

Ссылка на другой поток: HTML / Javascript - Разверните и сверните строки таблицы (дочерние), щелкнув родительскую строку

Любая помощь была бы отличной, застрял на этом целую вечность

Спасибо:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...