Question

当我点击其中一个具有onclick功能的表格标题时，表格的CSS样式消失了，i。即它不再适用于表格。我尝试改变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

这是您的确切问题：

点击之前：

Classes row and border are present.

点击后：

Classes disappeared!

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">';

（也有类似的，可能更好的替代品）。

Answer 2

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

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

PHP中的CSS样式在“onclick”脚本之后丢失 - 需要帮助保持HTML表格与原始CSS样式

2 个答案: