英文:
How can I exclude the headers row from specific functions that hide/show table rows?
问题
Here is the translated content:
我看到了一个将表格分割为“页”的脚本，但在同一页中，我想知道如何排除标题行，使其始终显示，并且新的表格保留原始完整表格的样式。甚至可以添加一个选项以禁用拆分，如果您不希望它始终拆分（非必需）。页面和因此表格是从另一个文件动态创建的。我想为用户添加一个选项，让他添加自己的行，但这是以后的事情。
这是带有示例添加行的代码：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Paginate Table Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* 所有样式可选 */
.tdiv {
float: left;
margin-right: 1em;
}
</style>
<script type="text/javascript">
/* Paginate Table Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
// 您可以在此处通过id初始化任意数量的表格：paginateTable('id', 0, num_max_rows);
paginateTable.init = function(){ // 删除任何未使用的
paginateTable('test1', 0, 4);
};
////////////////////// 停止编辑 //////////////////////
function paginateTable(table, way, max){
max? paginateTable.max[table] = max : max = paginateTable.max[table];
way = way == 1? 1 : way == -1? 0 : -1;
var r = document.getElementById(table).rows, i = 0;
for(i; i < r.length; ++i) // 查找当前起点
if(r[i].style.display != 'none')
break;
for(i; i < r.length; ++i){ // 继续查找当前终点
if(r[i].style.display == 'none'){
paginateTable.endPoint[table] = i;
break;
};
paginateTable.endPoint[table] = 0; // 如果找不到终点，则表格为“virgin”或在末尾
};
if(way == 1 && r[r.length - 1].style.display != 'none') return; // 表格已经在末尾，我们试图前进
// 如果前进，起点将是旧终点，否则起点将是旧起点 - 最大或0，以较大者为准：
paginateTable.startPoint[table] = way? paginateTable.endPoint[table] : Math.max( 0, paginateTable.startPoint[table] - max);
paginateTable.endPoint[table] = paginateTable.startPoint[table] + --max; // 新的终点将是新的起点 + 最大 - 1
for (i = r.length - 1; i > -1; --i) // 根据它们是否在计算的起点/终点范围内设置行的显示
r[i].style.display = i < paginateTable.startPoint[table] || i > paginateTable.endPoint[table]? 'none' : '';
};
paginateTable.startPoint = {};
paginateTable.endPoint = {};
paginateTable.max = {};
if(window.addEventListener)
window.addEventListener('load', paginateTable.init, false);
else if (window.attachEvent)
window.attachEvent('onload', paginateTable.init);
//////////////// 结束Paginate Table Script ///////////////
</script>
</head>
<body>
<div class="tdiv">
<input type="button" value="Next" onclick="paginateTable('test1', 1);">
<input type="button" value="Previous" onclick="paginateTable('test1', -1);">
<table id="test1">
<tbody id="some_id"><tr id="some_header" class="some_header">
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>
</body>
</html>
首先，我显然删除了test2表格，因为我不需要多个按钮集合。但是，我不确定如何在这种情况下保留第一行和样式，也许有一种更容易的方法来拆分它（而不需要创建新页面，因为它应该是一个文件以便于使用，并且部分用于离线使用）。
我希望了解如何操纵这样的函数，以备将来使用。
英文:
I've seen a script that divides table to "pages" in the same page, I was wondering how could I exclude the header row so that it would always show and also that the new tables would have the style of the original full table. Maybe even with an added option to disable the splitting if you don't want it to be split all the time (not necessary). While the page and therefore the table are being created dynamically from another file. I want to add an option for the user to add his own rows, but that's a matter for another time.
http://www.dynamicdrive.com/forums/showthread.php?37116-Divide-table-to-pages
That's the code with added lines as an example:
<tbody id="some_id"><tr id="header" class="header">
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Paginate Table Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* All Styles Optional */
.tdiv {
float: left;
margin-right: 1em;
}
</style>
<script type="text/javascript">
/* Paginate Table Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
// you can init as many tables as you like in here by id: paginateTable('id', 0, num_max_rows);
paginateTable.init = function(){ // remove any not used
paginateTable('test1', 0, 4);
paginateTable('test2', 0, 3);
};
////////////////////// Stop Editing //////////////////////
function paginateTable(table, way, max){
max? paginateTable.max[table] = max : max = paginateTable.max[table];
way = way == 1? 1 : way == -1? 0 : -1;
var r = document.getElementById(table).rows, i = 0;
for(i; i < r.length; ++i) // find current start point
if(r[i].style.display != 'none')
break;
for(i; i < r.length; ++i){ // continue on to find current end point
if(r[i].style.display == 'none'){
paginateTable.endPoint[table] = i;
break;
};
paginateTable.endPoint[table] = 0; // if no end point found, table is 'virgin' or at end
};
if(way == 1 && r[r.length - 1].style.display != 'none') return; // table was already at the end and we tried to move forward
// if moving forward, start will be old end, else start will be old start - max or 0, whichever is greater:
paginateTable.startPoint[table] = way? paginateTable.endPoint[table] : Math.max( 0, paginateTable.startPoint[table] - max);
paginateTable.endPoint[table] = paginateTable.startPoint[table] + --max; // new end will be new start + max - 1
for (i = r.length - 1; i > -1; --i) // set display of rows based upon whether or not they are in range of the calculated start/end points
r[i].style.display = i < paginateTable.startPoint[table] || i > paginateTable.endPoint[table]? 'none' : '';
};
paginateTable.startPoint = {};
paginateTable.endPoint = {};
paginateTable.max = {};
if(window.addEventListener)
window.addEventListener('load', paginateTable.init, false);
else if (window.attachEvent)
window.attachEvent('onload', paginateTable.init);
//////////////// End Paginate Table Script ///////////////
</script>
</head>
<body>
<div class="tdiv">
<input type="button" value="Next" onclick="paginateTable('test1', 1);">
<input type="button" value="Previous" onclick="paginateTable('test1', -1);">
<table id="test1">
<tbody id="some_id"><tr id="some_header" class="some_header">
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>
<div class="tdiv">
<input type="button" value="Next" onclick="paginateTable('test2', 1);">
<input type="button" value="Previous" onclick="paginateTable('test2', -1);">
<table id="test2">
<tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>
</body>
</html>
First I removed test2 table obviously since I don't need more than 1 set of buttons for that. But I'm not sure how to both keep the first row and the style when the tables are being split that way, maybe there's an easier way to split it (without creating new pages, since it's supposed to be one file for ease of use and partly to be used offline)
I want to understand how to manipulate a function like that for the future.
答案1
得分: 0
你可以切片行以跳过第一行。
但最好使用正确的HTML将标题包装在<thead>中，其余部分包装在<tbody>中：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{
const r = [...document.getElementById('table').rows].slice(1);
r[0].cells[0].textContent = 'Test';
}
{
const r = document.querySelectorAll('#table2>tbody>tr');
r[0].cells[0].textContent = 'Test';
}
<!-- language: lang-html -->
<table id="table">
<tr id="#header"><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
<table id="table2">
<thead>
<tr id="#header"><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>
<!-- end snippet -->
英文:
You could slice the rows to skip the first one.
But better use the proper HTML and wrap you header into <thead> and the rest into <tbody>:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{
const r = [...document.getElementById('table').rows].slice(1);
r[0].cells[0].textContent = 'Test';
}
{
const r = document.querySelectorAll('#table2>tbody>tr');
r[0].cells[0].textContent = 'Test';
}
<!-- language: lang-html -->
<table id="table">
<tr id="#header"><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
<table id="table2">
<thead>
<tr id="#header"><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年6月26日 22:45:09
- 转载请务必保留本文链接：https://go.coder-hub.com/76557764.html
- arrays
- css
- html
- html-table
- javascript
评论