Javascript PHP中的CSS样式在“之后丢失”；onclick"；脚本 — ；需要帮助保持原始CSS样式的HTML表格吗

当我点击其中一个具有

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>

变量人，asc1=1，
asc2=1，
asc3=1；
asc4=1；
window.onload=函数（）{
people=document.getElementById（“people”）；
}
函数排序表（tbody、col、asc）{
var rows=tbody.rows，
rlen=行数。长度，
arr=新数组（），
我
J
细胞，
克莱恩；
//用表中的值填充数组
对于（i=0；ib[col]）？asc:-1*asc）；
});
对于（i=0；i

尝试将css样式代码移出PHP标记

.parentTbl表格{
边界间距：0；
边界塌陷：塌陷；
边界：0；
宽度：220px；
表布局：固定
}
.childTbl表格{
边界间距：0；
边界塌陷：塌陷；
边框：无；/*1px实心#d7d7*/
宽度：219px；
表布局：固定
}
.childTbl th，
.childTbl td{
字体大小：12px；
字体大小：粗体；
背景：#222937；
颜色：白色；
宽度：10px；
底边：1吨纯红；
光标：指针；
}
.滚动数据{
宽度：236px；
高度：110px；
溢出x：隐藏；
}
td.border{
颜色：#D3AB04；
字体大小：11px；
宽度：10px；
}
tr.row：第n个孩子（奇数）{
背景：#222937；
}
tr.row：第n个孩子（偶数）{
背景：黑色；
}
变量人，asc1=1，
asc2=1，
asc3=1；
asc4=1；
window.onload=函数（）{
people=document.getElementById（“people”）；
}
函数排序表（tbody、col、asc）{
var rows=tbody.rows，rlen=rows.length，arr=new Array（），i，j，cells，clen；
//用表中的值填充数组
对于（i=0；ib[col]）？asc:-1*asc）；
});
对于（i=0；i

这正是您的问题：

单击前：

单击后：

行

和

边框

类将消失，因为您不再在排序函数中生成它们

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

• tr.row

  和

  .childTbl tbody>tr

  （两次）

• td.border

  与

  .childTbl tbody>tr>td

在PHP代码中

• echo'带有
  echo''

• echo”“

  …带有

  echo”“

将CSS类分配给包装器

div

时还有另一个错误。简单地替换

• echo'带有
  echo''

---

（也有类似的、可能更好的替代方案）。

这真的就是全部代码吗？它缺少基本的html，这可能会扰乱显示。一些东西对你的JS说：

asc4

没有包含在

var

语句中

asc1

、

asc2

、

asc3

和

asc4

从未真正被使用过。对我来说，这很好，当我点击标题进行排序时，我的CSS样式、颜色、字体大小等都会出现“混乱”。。。不知道为什么…通过简单使用调试工具解决了另一个问题…对浏览器来说是零差异谢谢。你能给我举个例子说明怎么做吗？我已经有一段时间没有编码了。我花了一段时间才弄明白这件事。谢谢。我已经更新了答案。基本上，在你的代码中有六个替换项，那么它应该可以工作。这与我的建议不同，但是无论什么能让你的船漂浮…