为HTML表设置最大显示行数 [英] Set maximum displayed rows count for HTML table
问题描述
使用包含未知行数的动态生成的HTML表的JSP页面。
拥有后端的属性，设置最大行数，例如： max_rows = 15
。如何将HTML表格的行数限制为 max_rows 值？
表格的其他部分应该可以通过垂直滚动来访问，这意味着用户看到15行并且如果向下滚动，则会看到表格的其他行。
它可以通过计算row的平均高度和使用div-wrapper的max-height属性来经验地实现，但我认为这种方法不是非常稳定。
所以需要依靠行数。
也许有这种情况下的插件，或者它是标准的CSS或HTML解决方案？
这可以通过标准HTML，CSS和一些javascript。它可以被优雅地降级，也可以在javascript关闭的情况下降级。我的意思是，他们只会看到原始的表格，不会被滚动条修改。试试像这样：
< html>
< head>
< style type =text / css>
表{
width：100％;
border-collapse：collapse;
}
td {
border：1px纯黑;
}
.scrollingTable {
width：30em;
overflow-y：auto;
}
< / style>
< script type =text / javascript>
函数makeTableScroll（）{
//通过JSP从服务器端获取的常量
var maxRows = 4;
var table = document.getElementById（'myTable'）;
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
var height = 0;
if（rowsInTable> maxRows）{
for（var i = 0; i< maxRows; i ++）{
height + = table.rows [i] .clientHeight;
}
wrapper.style.height = height +px;
}
}
< / script>
< / head>
< body onload =makeTableScroll（）;>
< div class =scrollingTable>
< table id =myTable>
< tr>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< / tr>
< tr>
< td>下面是一些应该包装的长文本：等等等等等等等等等等等等等等等等等等等等等等等等等等等等。
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< / tr>
< tr>
< td> blah< / td>
< td> blah< / td>
< td> blah< / td>
< td> blah< / td>
< / tr>
< tr>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< / tr>
< tr>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< / tr>
< tr>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< td>等等等等< / td>
< / tr>
< tr>
< td> blah< / td>
< td> blah< / td>
< td> blah< / td>
< td> blah< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
这已经在Firefox，Chrome和IE 7中测试过了，但它应该适用于所有现代浏览器。请注意，每行的内容有多高或每个单元有多少填充无关紧要。如果您不想在表格中使用border-collapse：collapse，那么您必须在for循环中添加代码才能考虑cellpacing。
如果你有更厚的边框，那么用这个替换javascript函数：
$ p $函数makeTableScroll（）{
//通过JSP从服务器端获取的常量
var maxRows = 4;
var table = document.getElementById（'myTable'）;
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
try {
var border = getComputedStyle（table.rows [0] .cells [0]，''）.getPropertyValue（'border-top-width'）;
border = border.replace（'px'，''）* 1;
} catch（e）{
var border = table.rows [0] .cells [0] .currentStyle.borderWidth;
border =（border.replace（'px'，''）* 1）/ 2;
}
var height = 0;
if（rowsInTable> maxRows）{
for（var i = 0; i< maxRows; i ++）{
height + = table.rows [i] .clientHeight + border;
}
wrapper.style.height = height +px;
$ / code
$ b $ p
$ b $ try / catch处理IE和其他浏览器。 catch中的代码是IE。
Have JSP page with dynamically generated HTML table with unknown number of rows.
Have property on backend, that sets maximum number of rows, e.g: max_rows=15.
How to limit number of rows for HTML table to max_rows value? Other part of table should be accessible by vertical scroll,it means that user see 15 rows and if to scroll down, that it will be seen other rows of table.
It can be done empirically by calculating average height of row and using max-height property for div-wrapper, but i think this approach is not very stable.
So it's needed to rely on row count. Perhaps there is plugin for such case or it's standard CSS or HTML solution?
This can be done with standard HTML, CSS and a bit of javascript. It can be made to degrade gracefully for clients with javascript turned off too. By that I mean, they'll just see the original table, unmodified by scrollbars. Try something like this:
<html>
<head>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
.scrollingTable {
width: 30em;
overflow-y: auto;
}
</style>
<script type="text/javascript">
function makeTableScroll() {
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
var height = 0;
if (rowsInTable > maxRows) {
for (var i = 0; i < maxRows; i++) {
height += table.rows[i].clientHeight;
}
wrapper.style.height = height + "px";
}
}
</script>
</head>
<body onload="makeTableScroll();">
<div class="scrollingTable">
<table id="myTable">
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
</table>
</div>
</body>
</html>
This was tested in Firefox, Chrome and IE 7, but it should work all modern browsers. Note that it doesn't matter how tall the content of each row is, or how much padding each cell has. If you don't want to use border-collapse:collapse on your table, then you'll have to add code in the for loop to take cellspacing into account.
If you have thicker borders, then replace the javascript function with this one:
function makeTableScroll() {
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
try {
var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width');
border = border.replace('px', '') * 1;
} catch (e) {
var border = table.rows[0].cells[0].currentStyle.borderWidth;
border = (border.replace('px', '') * 1) / 2;
}
var height = 0;
if (rowsInTable > maxRows) {
for (var i = 0; i < maxRows; i++) {
height += table.rows[i].clientHeight + border;
}
wrapper.style.height = height + "px";
}
}
The try/catch in there handles the differences between IE and other browsers. The code in the catch is for IE.
这篇关于为HTML表设置最大显示行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
