我无法让表格正确显示。我正在使用 HP echo 语句创建表 - 4 列,最多几百行。我只想随时显示表格的 20 行。所以我创建了全尺寸表然后初始化我首先使用 js 函数调用,对所有行调用 css(显示:无),然后对我希望的数组中的 20 个连续行中的每一行调用 css(显示:表)显示。
thead 的 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 的第 1 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 是 sibling ,是 table 的 child 。
主要问题是 tbody cols 在 js 调用后失去了它们的宽度样式。提示:
如果我在
alert()
处暂停 js,我会看到完整的表格,其中 4 列被格式化为 thead 和 tbody 的正确列宽。 (但是第一列中的 .title div 是“居中”对齐的,而不是我预期的“左”对齐。)当我让 js 完成时,我会按预期看到文件的前 20 行,但 tbody 中的所有列都失去了它们的宽度样式,并恢复为基于 td 内容宽度的默认浏览器列宽度,但广告宽度样式保持正常。
在花了几天时间在这里和其他地方搜索提示但一无所获之后,我的选择已经用完了。我非常感谢一些不像我现在那么红的新鲜眼睛的帮助。 (我希望作为我的第一个问题,我没有在这里放太多东西。它可能非常简单。)
最佳答案
尝试将行显示设置为表格行,而不仅仅是表格。
关于jquery - jQuery 显示 :none then display:table 后 td 丢失 ext 文件样式设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19643872/