Javascript 单击按钮时显示更多或更少

有人能帮我处理这段代码吗

我有一张通常有5行以上的桌子

我只想在加载页面时显示5，当单击“显示更多”时显示其余内容，当单击“显示更少”时仅显示5

“显示更多”和“显示更少”必须是同一按钮

有人能帮我吗。我开始使用Jquery，但我想使用纯JS

$（“[id*='trid']>tr”）。每个（函数（索引）{
如果（索引>=5）{
$（this.hide（）；
}
});
函数mostrarRegistros（）{
$（“[id*='trid']>tr”）。每个（函数（索引）{
$（this.show（）；
});
}

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰3
雌鹿
80
约翰4
雌鹿
80
约翰5
雌鹿
80
约翰6
雌鹿
80






Show More/Show Less

这里有一个使用vanilla js的解决方案，这是一种方法，但可以做得不同，比如动态地附加按钮，这将简化它

如果有多个表，请使用一个类定义该表应具有显示功能，然后抓取所有表并将元素传递给提供该功能的函数，然后使用id作为标识符返回可调用按钮的方法集

const tableReveal=函数（elm，选项）{
//合并选项
options=Object.assign（{}{
限额：3
}，选项）
//tr的
设trs=elm.querySelectorAll（'tbody tr'）
//显示状态
展示
//芬克斯
常量隐藏=（）=>{
trs.forEach（（tr，index）=>index>=options.limit？tr.style.display='none'：''）
显示=错误
}
常量显示=（）=>{
trs.forEach（（tr）=>tr.style.display='table row'）
所示为真
}
//初始状态
隐藏（）
//揭示功能
返回{
切换：（）=>显示？隐藏（）：显示（），
隐藏
显示
}
}
/**
*用法：
*-对于每个over every table reveal类、init reveal func和传入元素+选项，返回并为按钮分配表[id]
*/
let table={}
document.querySelectorAll（'.table-reveal'）.forEach（el=>table[el.getAttribute（'id'））]=tableReveal（el{
限额：5
}))

名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰3
雌鹿
80
约翰4
雌鹿
80
约翰5
雌鹿
80
约翰6
雌鹿
80
多展示/少展示
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
约翰3
雌鹿
80
约翰4
雌鹿
80
约翰5
雌鹿
80
约翰6
雌鹿
80
Show More/Show Less

这是我在

jquery

上的一个解决方案，使用伪类

:visble

，它确定

tr

的可见标记，以及

lt（）

选择器来确定表中行的最小值

同样在我的示例中，按钮根据隐藏或显示文本的需要更改文本：

$('button').text('Show More');

及

$（'trid tr'）.hide（）；
$（“#trid tr:lt（5）”.show（）；
$（“按钮”）.text（“显示更多”）；
函数mostrarRegistros（）{
if（$（'#trid tr:visible'）.length您可以使用
.toggle（）
重用按钮后面的相同函数，而不是单独的隐藏/显示函数。例如，
$（“#trid tr:gt（5）”）.toggle（）
。此外，您的表的结构应该更清晰，以便有一个
和一个
。您的表的渲染不是很清晰--它有两个
元素，我认为这不是您想要的。
$('button').text('Show Less');