td 在 jQuery display:none 然后 display:table 后丢失 ext 文件样式设置

Posted 2023-05-08

【中文标题】td 在 jQuery display:none 然后 display:table 后丢失 ext 文件样式设置

【英文标题】：td loses ext file style settings after jQuery display:none then display:table

【发布时间】：2013-11-07 18:15:55

【问题描述】：

我无法让表格正确显示。我正在使用 HP echo 语句创建表 - 4 列，最多数百行。我只想随时显示 20 行表格。所以我创建了完整大小的表，然后初始化我使用一个 js 函数调用，首先是所有行的 css (display: none)，然后是我希望的数组中 20 个连续行中的每一行的 css (display:table)显示。

标题的 html：

<thead> 
        <tr>
            <th>
                <div class='title'>Fiddle Tunes Collection (<? echo sizeof($pml_arr); ?>) </div>
            </th>
            <th class='key' >Key</th>
            <th class='mode'>Mode</th>
            <th id="TS" class='type'>Tune/Song</th> 
        </tr>
    </thead>

tbody 的 php：

foreach ($pml_arr as $row => $cell)    
            $item = $row + 1;
            echo    "<tr id='row" . $row . "'>" ;   
                echo    "<td>";
                    echo "<div class='title'> ";
                        echo "$item"; 
                        echo ") ";
                        echo "$cell[0] ";
                    echo "</div> ";
                echo "</td>";
                echo    "<td class='key'>$cell[1]</td>" ;
                echo    "<td class='mode'>$cell[2]</td>" ;
                echo    "<td class='type'>$cell[3]</td>" ;
            echo    "</tr>" ;   
        

js:

function initTblDisp()   // alert("View the full array in the table");
    $(document).ready (function ()    
        $("tbody > tr").css ("display", "none"); 
        var i=0; var row_id;
        while (i<20)       
            row_id = ("row" + i); 
            $("#" + row_id).css ("display", "table"); 
            i++; 
           
    ); 

div class="title" 的 css：

.title           width:55%; text-align:left; padding-left:4px; 
padding-right:4px; display:inline; white-space:no-wrap; overflow:hidden; 

回显 php 的第一个 2 tr（来自“查看源代码”）：

<tr id='row0'>
  <td> <div class='title'> 1) Boys of Bluehill </div> </td>
  <td class='key'>D</td><td class='mode'>major</td>
  <td class='type'>T</td>
</tr>

<tr id='row1'>
  <td><div class='title'> 2) Cluck Old Hen </div> </td>
  <td class='key'>A</td>
  <td class='mode'>Dorian</td>
  <td class='type'></td>
</tr>

thead 和 tbody 是兄弟姐妹，table 的孩子。

主要问题是 tbody cols 在 js 调用后失去了它们的宽度样式。提示：

如果我在 alert() 处暂停 js，我会看到完整的表格，其中 4 个 cols 的格式设置为适用于 thead 和 tbody 的正确 col 宽度。 （但第一列中的 .title div 对齐“中心”，而不是我预期的“左”。）

1234563但头部宽度样式仍然可以。

花了几天时间在这里和其他地方搜索提示，却一无所获，我已经没有选择了。我非常感谢一些不像我现在那么红的新鲜眼睛的帮助。 （我希望作为我的第一个问题，我没有在这里放太多。这可能是愚蠢的简单。）

【参考方案1】：

尝试将行显示设置为 table-row 而不是 table。

【讨论】：

是的，这成功了。现在我需要花时间真正理解 CSS 显示属性的“所有”可能设置。谢谢！