根据字段值或单击“添加”按钮逐个显示HTML表行

我在表中有几行包含10种共病

<table>
   <!-- Co-Morbidities1 -->
<tr id="como1">
    <td>Row1&nbsp;</td>
    <td>Co-Morbidities1&nbsp;</td>
    <td>value column</td>
</tr>
  <!--  Co-Morbidities2 -->
<tr id="como2">
    <td>Row2&nbsp;</td>
    <td>Co-Morbidities2&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities3 -->
<tr id="como13">
    <td>Row3&nbsp;</td>
    <td>Co-Morbidities3&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities4 -->
<tr id="como4">
    <td>Row4&nbsp;</td>
    <td>Co-Morbidities4&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities5 -->
<tr id="como5">
    <td>Row5&nbsp;</td>
    <td>Co-Morbidities5&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities6 -->
<tr id="como6">
    <td>Row6&nbsp;</td>
    <td>Co-Morbidities6&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities7 -->
<tr id="como7">
    <td>Row7&nbsp;</td>
    <td>Co-Morbidities7&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities8 -->
<tr id="como8">
    <td>Row8&nbsp;</td>
    <td>Co-Morbidities8&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities9 -->
<tr id="como9">
    <td>Row9&nbsp;</td>
    <td>Co-Morbidities9&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities10    -->
<tr id="como10">
    <td>Row10&nbsp;</td>
    <td>Co-Morbidities10&nbsp;</td>
    <td>&nbsp;</td>
</tr></table>

第1行
共病1
值列
第2行
共病2
第3行
共病3
第4行
共病4
第5行
共病5
第6行
共病6
第7行
共病7
第8行
共病8
第9行
共病9
第10行
共病10

我想要实现的是，我不想一次显示全部10行，而是一次显示一行。如果填充了第一行值，则我希望显示第二行，如果填充了第二行值，则我希望显示第三行，依此类推。我希望根据填充前一行中的值逐步显示行

我是Javascript新手，刚刚开始学习。我确实在谷歌上花了几个小时，却没有找到快乐。有人能帮忙吗？非常感谢。

简单示例

使用jquery 此行隐藏表$（'table tr'）中的所有行。hide（）； 然后我显示第一行$（'table tr:eq（0）'）。show（）；eq选择器根据数字选择元素，0为第一行，1为第二行，以此类推

然后，我只需单击按钮，将1添加到当前行，并显示该行。您可以使用相同的方法一次隐藏一行，或者制作一个按钮来显示所有行，等等

编辑 我创建了另一个隐藏行的函数

编辑 好的，最后一次尝试。通过向“tr”添加一个类，您可以拥有由按钮控制的行和静态行。看看这把新小提琴

HTML

静态行
静态行
静态行
第1行
共病1
值列
第2行
共病2
第3行
共病3
第4行
共病4
第5行
共病5
第6行
共病6
第7行
共病7
第8行
共病8
第9行
共病9
第10行
共病10
​

JQUERY

var currentrow = 0;
var maxrows = $('.showhide').size() - 1;

$('table tr.showhide').hide();
$('table tr.showhide:eq(0)').show();

$("#onemore").click(function() {
    if (currentrow < maxrows) {
        currentrow++;
        $('table tr.showhide:eq(' + currentrow  + ')').show();
    }
});

$("#oneless").click(function() {
    if (currentrow > 0) {
        $('table tr.showhide:eq(' + currentrow  + ')').hide();
        currentrow--;
    }
});

var currentrow=0；
var maxrows=$（'.showhide'）.size（）-1；
$（'table tr.showhide'）.hide（）；
$（'table tr.showhide:eq（0）'）.show（）；
$（“#更多”）。单击（函数（）{
如果（当前行<最大行）{
currentrow++；
$（'table tr.showhide:eq（'+currentrow+'））.show（）；
}
});
$（“#oneless”）。单击（函数（）{
如果（当前行>0）{
$（'table tr.showhide:eq（'+currentrow+'））.hide（）；
当前行--；
}
});

这太棒了。你能告诉我如何将代码添加到我的html页面吗。我将此添加到head标记：并将代码放在标记之间。但这似乎奏效了。我有些事情做得不对。请帮忙！！！我无法查看它，它需要登录到您的skydrive帐户，您显然不想在此处提供该帐户。转到并在那里设置您的代码，我们可以进行故障排除。是的，在我包括第一行之后，它就可以工作了$（document）.ready（function（））另一个特点是，一旦页面刷新，它将返回到仅一行。例如，如果我添加了4行，那么即使在页面刷新之后，这4行是否仍然可见。这是否可能？谢谢最好的方法是使用cookies来设置。

var currentrow = 0;
var maxrows = $('.showhide').size() - 1;

$('table tr.showhide').hide();
$('table tr.showhide:eq(0)').show();

$("#onemore").click(function() {
    if (currentrow < maxrows) {
        currentrow++;
        $('table tr.showhide:eq(' + currentrow  + ')').show();
    }
});

$("#oneless").click(function() {
    if (currentrow > 0) {
        $('table tr.showhide:eq(' + currentrow  + ')').hide();
        currentrow--;
    }
});