javascript - PHP 中的 CSS 样式在 "onclick"脚本后丢失 — 需要帮助保持 HTML 表格具有原始 CSS 样式

Question

当我单击其中一个具有 onclick 函数的表标题时，该表的 CSS 样式消失，即。 e.它不再应用于表格。我尝试更改 CSS 文件，但我认为我做的不对。我真的需要一些帮助来弄清楚如何让样式保持不变。

<?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

这正是您的问题:

点击前:

点击后:

row和 border类会消失，因为您不会在排序函数中再次生成它们。

我建议在 CSS 中替换所有出现的

• tr.row与 .childTbl tbody>tr (两次)
• td.border与 .childTbl tbody>tr>td

在 PHP 代码中

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

将 CSS 类分配给包装器时还有另一个错误 div .简单替换

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

(也有类似且可能更好的替代方案)。