html - 根据字段值或单击添加按钮一一显示 HTML 表格行

Question

我的表中有几行包含 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>

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

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

Answer 1

简单示例http://jsfiddle.net/tJdFZ/

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

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

编辑我创建了另一个隐藏一行的函数http://jsfiddle.net/tJdFZ/1/

编辑好吧，最后一次尝试。通过向“tr”添加一个类，您可以拥有由按钮控制的行和静态的行。看看新的小提琴 http://jsfiddle.net/tJdFZ/24/

HTML

<table>
<tr>
    <td colspan=3>Static Row</td>
</tr>
<tr>
    <td colspan=3>Static Row</td>
</tr>
<tr>
    <td colspan=3>Static Row</td>
</tr>
   <!-- Co-Morbidities1 -->
<tr id="como1" class="showhide">
    <td>Row1&nbsp;</td>
    <td>Co-Morbidities1&nbsp;</td>
    <td>value column</td>
</tr>
  <!--  Co-Morbidities2 -->
<tr id="como2" class="showhide">
    <td>Row2&nbsp;</td>
    <td>Co-Morbidities2&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities3 -->
<tr id="como3" class="showhide">
    <td>Row3&nbsp;</td>
    <td>Co-Morbidities3&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities4 -->
<tr id="como4" class="showhide">
    <td>Row4&nbsp;</td>
    <td>Co-Morbidities4&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities5 -->
<tr id="como5" class="showhide">
    <td>Row5&nbsp;</td>
    <td>Co-Morbidities5&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities6 -->
<tr id="como6" class="showhide">
    <td>Row6&nbsp;</td>
    <td>Co-Morbidities6&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities7 -->
<tr id="como7" class="showhide">
    <td>Row7&nbsp;</td>
    <td>Co-Morbidities7&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities8 -->
<tr id="como8" class="showhide">
    <td>Row8&nbsp;</td>
    <td>Co-Morbidities8&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities9 -->
<tr id="como9" class="showhide">
    <td>Row9&nbsp;</td>
    <td>Co-Morbidities9&nbsp;</td>
    <td>&nbsp;</td>
</tr>
  <!--  Co-Morbidities10    -->
<tr id="como10" class="showhide">
    <td>Row10&nbsp;</td>
    <td>Co-Morbidities10&nbsp;</td>
    <td>&nbsp;</td>
    </tr></table>
<input type=button value="Show 1 more" id="onemore" />
<input type=button value="Hide 1" id="oneless" />​

查询

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--;
    }
});