Question

I have few rows in table that contain 10 co-morbidities.

<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>

What I want to achieve is, I don’t want to display the 10 rows all at once, but display them one at a time. If the first row value is populated, then I want the second row to be displayed, if the second row value is populated, then I want the third row to be displayed, and so on. I want the rows to be displayed progressively based on the values in the previous row is populated.

I am new to Javascript, just beginning to learn. I did spent hours on Google and found no joy. Please could someone help? Much appreciated.

Answer 1

Simple example http://jsfiddle.net/tJdFZ/

Using jquery
This line hides all of the rows in the table $(‘table tr’).hide();
then I show the first line $(‘table tr:eq(0)’).show(); The eq selector selects the element based on the number, 0 being the first row, 1 being the second, etc.

Then I just use the button click, I add 1 to the current row, and show that row. You could use the same idea to hide one row at a time, or you could make a button to show all rows, etc.

EDIT
I created another function that hides a row http://jsfiddle.net/tJdFZ/1/

EDIT
Alright, last try. by adding a class to the “tr” you can have rows that are controlled by the buttons, and rows that are static. Take a look at the new fiddle 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--;
    }
});