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添加到当前行，并显示该行。您可以使用相同的想法一次隐藏一行，或者您可以创建一个按钮来显示所有行等。

EDIT 我创建了另一个隐藏行http://jsfiddle.net/tJdFZ/1/

的函数

EDIT 好吧，最后一次尝试。通过向“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" />

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

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

1 个答案: