-1

テーブルには、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 行を表示するのではなく、一度に 1 行ずつ表示することです。最初の行の値が入力されている場合は 2 番目の行を表示し、2 番目の行の値が入力されている場合は 3 番目の行を表示します。前の行に入力された値に基づいて、行を段階的に表示したいと考えています。

私はJavascriptが初めてで、学び始めたばかりです。私は何時間も Google で過ごしましたが、何の喜びもありませんでした。誰か助けてください。とても有難い。

4

1 に答える 1

1

簡単な例http://jsfiddle.net/tJdFZ/

jquery の使用 この行は、テーブル内のすべての行を非表示にします $('table tr').hide(); 次に、最初の行 $('table tr:eq(0)').show(); を表示します。eq セレクターは、番号に基づいて要素を選択します。0 は最初の行、1 は 2 番目の行などです。

次に、ボタンのクリックを使用して、現在の行に 1 を追加し、その行を表示します。同じアイデアを使用して、一度に 1 行ずつ非表示にしたり、すべての行を表示するボタンを作成したりできます。

編集 行を非表示にする別の関数を作成しました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" />​

Jクエリ

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--;
    }
});
于 2012-04-18T21:44:53.757 に答える