CSS styling in PHP lost after “onclick” script — need help keeping HTML table with original CSS styling

Question

When I click on one of the table headings which have an onclick function the CSS styling for the table disappears, ie it isn't applied to the table any more. I tried altering the CSS file but I dont think I'm doing it right. I really need some help trying to figure out how to get the styling to remain the same.

<?php
$input = 'https://www.fdic.gov/bank/individual/failed/banklist.csv';

echo "<style>
  .parentTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 0;
  width: 220px;
  table-layout: fixed
}

.childTbl table {
  border-spacing: 0;
  border-collapse: collapse;
  border: none; /* 1px solid #d7d7d7; */
  width: 219px;
  table-layout: fixed
}

.childTbl th, .childTbl td {
  font-size: 12px;
  font-weight:bold;
  background: #222937;
  color: white;
  width: 10px;
  border-bottom: 1pt solid red;
  cursor: pointer;
}

.scrollData {
  width: 236px;
  height: 110px;
  overflow-x: hidden;
}

td.border{
  color: #D3AB04;
  font-size: 11px;
  width: 10px;
}

tr.row:nth-child(odd) {
  background: #222937;
}

tr.row:nth-child(even) {
  background: black;
}
</style>";

echo '<div class=parentTbl>';
  echo '<table>';
    echo '<tr>';
      echo '<td>';
        echo '<div class=childTbl>';
          echo '<table class=childTbl>';
            echo '<thead>';
              echo '<tr>';
                echo '<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; asc4 = 1;">Bank Name</th>';
                echo '<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc4 = 1; asc1 = 1;">City</th>';
                echo '<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc4 = 1; asc1 = 1; asc2 = 1;">Acq. Inst.</th>';
                echo '<th onclick="sort_table(people, 3, asc4); asc4 *= -1; asc1 = 1; asc2 = 1; asc3 = 1;">Closing Date</th>';
              echo '</tr>';
            echo '</thead>';
          echo '</table>';
        echo '</div>';
      echo '</td>';
    echo '</tr>';

    echo '<tr>';
      echo '<td>';
        echo '<div class=scrollData childTbl>';
          echo '<table>';
            echo '<tbody id=people>';

            if (false !== ($ih = fopen($input, 'r'))){
              fgetcsv($ih);
              while (false !== ($data = fgetcsv($ih))){
                $outputData = array($data[0], $data[1], $data[4], $data[5]);
                echo '<tr class=row>';

                foreach ($outputData as $row){
                  echo "<td class=border>" . htmlspecialchars($row) . "</td>";
                }

                echo '</tr>';
              }
            }

            echo '</tbody>';
          echo '</table>';
        echo '</div>';

        fclose($ih);

      echo '</td>';
    echo '</tr>';
  echo '</table>';
echo '</div>';
?>

<script type="text/javascript">
var people, asc1 = 1,
  asc2 = 1,
  asc3 = 1;
asc4 = 1;

window.onload = function(){
  people = document.getElementById("people");
}

function sort_table(tbody, col, asc){
  var rows = tbody.rows,
    rlen = rows.length,
    arr = new Array(),
    i,
    j,
    cells,
    clen;
  // fill the array with values from the table
  for(i = 0; i < rlen; i++){
    cells = rows[i].cells;
    clen = cells.length;
    arr[i] = new Array();
    for(j = 0; j < clen; j++){
      arr[i][j] = cells[j].innerHTML;
    }
  }
  // sort the array by the specified column number (col) and order (asc)
  arr.sort(function(a, b){
    return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc);
  });
  for(i = 0; i < rlen; i++){
    arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
  }
  tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
}
</script>

Answer 1

This is your exact problem:

Before the click:

After the click:

The row and border classes disappear because you aren't generating them again in the sorting function.

I would suggest in the CSS to replace every occurence of

• tr.row with .childTbl tbody>tr (twice)
• td.border with .childTbl tbody>tr>td

and in the PHP code

• echo '<tr class=row>'; with echo '<tr>';
• echo "<td class=border>" … with echo '<td>' …

You also have another error in assigning CSS classes to the wrapper div . Simply replace

• echo '<div class=scrollData childTbl>'; with echo '<div class="scrollData childTbl">';

(There are similar and possibly better alternatives, too).

Answer 2

Try to move css style codes out of PHP tags

 <style type="text/css"> .parentTbl table { border-spacing: 0; border-collapse: collapse; border: 0; width: 220px; table-layout: fixed } .childTbl table { border-spacing: 0; border-collapse: collapse; border: none; /* 1px solid #d7d7d7; */ width: 219px; table-layout: fixed } .childTbl th, .childTbl td { font-size: 12px; font-weight:bold; background: #222937; color: white; width: 10px; border-bottom: 1pt solid red; cursor: pointer; } .scrollData { width: 236px; height: 110px; overflow-x: hidden; } td.border{ color: #D3AB04; font-size: 11px; width: 10px; } tr.row:nth-child(odd) { background: #222937; } tr.row:nth-child(even) { background: black; } </style> <?php $input = 'https://www.fdic.gov/bank/individual/failed/banklist.csv'; echo '<div class=parentTbl>'; echo '<table>'; echo '<tr>'; echo '<td>'; echo '<div class=childTbl>'; echo '<table class=childTbl>'; echo '<thead>'; echo '<tr>'; echo '<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; asc4 = 1;">Bank Name</th>'; echo '<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc4 = 1; asc1 = 1;">City</th>'; echo '<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc4 = 1; asc1 = 1; asc2 = 1;">Acq. Inst.</th>'; echo '<th onclick="sort_table(people, 3, asc4); asc4 *= -1; asc1 = 1; asc2 = 1; asc3 = 1;">Closing Date</th>'; echo '</tr>'; echo '</thead>'; echo '</table>'; echo '</div>'; echo '</td>'; echo '</tr>'; echo '<tr>'; echo '<td>'; echo '<div class=scrollData childTbl>'; echo '<table>'; echo '<tbody id=people>'; if (false !== ($ih = fopen($input, 'r'))) { fgetcsv($ih); while (false !== ($data = fgetcsv($ih))) { $outputData = array($data[0], $data[1], $data[4], $data[5]); echo '<tr class=row>'; foreach ($outputData as $row) { echo "<td class=border>" . htmlspecialchars($row) . "</td>"; } echo '</tr>'; } } echo '</tbody>'; echo '</table>'; echo '</div>'; fclose($ih); echo '</td>'; echo '</tr>'; echo '</table>'; echo '</div>'; ?> <script type="text/javascript"> var people, asc1 = 1, asc2 = 1, asc3 = 1; asc4=1; window.onload = function () { people = document.getElementById("people"); } function sort_table(tbody, col, asc){ var rows = tbody.rows, rlen = rows.length, arr = new Array(), i, j, cells, clen; // fill the array with values from the table for(i = 0; i < rlen; i++){ cells = rows[i].cells; clen = cells.length; arr[i] = new Array(); for(j = 0; j < clen; j++){ arr[i][j] = cells[j].innerHTML; } } // sort the array by the specified column number (col) and order (asc) arr.sort(function(a, b){ return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1*asc); }); for(i = 0; i < rlen; i++){ arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>"; } tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>"; } </script>