[英]How to add dynamically a column to a table layout based on the number of rows in the table?
我有一个表可能有足够的行来填满屏幕,我希望能够添加另一列而不是占用页面上的垂直空间。 在某一点(8行?)我希望其余行转移到一个新列。
我现在拥有的:
我想要的是:
以下是该表的html示例:
<table class="base-table">
<thead>
<td></td>
<td></td>
<td></td>
<td>min</td>
<td>avg</td>
<td>max</td>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><div style="border:1px solid #ccc;padding:1px;background: white;"><div style="width:4px;height:0;border:5px solid rgb(255, 0, 0);overflow:hidden"></div></div></td>
<td class="disabled"> stuff </td>
<td class="disabled"> stuff </td>
<td class="disabled"> stuff </td>
<td class="disabled"> stuff </td>
<td><button id="refresh-stats">Refresh</button></td>
</tr>
</tbody>
</table>
您需要做的是保留要追加的当前单元格数的计数,并在每第8次添加后重置它。 这至少应该让你开始; 一些追加可能对你来说更复杂:
var row = 1, table = document.querySelector('table');
document.querySelector('input').addEventListener('click', function () {
if (!table.rows[row % 8]) {
table.appendChild(document.createElement('tr'));
}
table.rows[row++ % 8].appendChild(document.createElement('td'));
});
达到所需的最大行数后,只需创建一个新表。 如果你向左漂浮它们,你将获得所需的效果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.