隐藏/显示表单部分

Question

I have a table in which five fields have upload rows.Each time, I submit a row,the pages refreshes. However, I want to hide all the 4 rows, when the first submit button is clicked, then it should show the next row, and hide the previous row. This should continue till the last one. I have tried the following, but not working. ie all the rows are displaying. I need assitance on how to achieve this feat.

<script>
$("#othBtn1").click(function(){
 $("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function(){
 $("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
</script>

This will continue till the last button. See the HTML below:

<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
   <tr id="oth1">
    <th width="26%">Other Request (1):<small>  &nbsp;(Attachment Required) <i> Attach each other request per line</i></small></th>
    <td width="33%">Description:<input type="text" name="tdesc1" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt1" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
    <td>File(1):<input type="file" name="jfile1"/></td>
    <td width="29%"><input type="submit" name="othBtn1"  id="othBtn1" value="Add to Request" class="btn btn-success"  /> </td>
    </tr>
    <tr id="oth2">
    <th width="26%">Other Request (2):<small>  &nbsp;(Attachment Required) <i> Attach each other request per line</i></small></th>
    <td width="33%">Description:<input type="text" name="tdesc2" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt2" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
    <td>File(2):<input type="file" name="jfile2"/></td>
    <td width="29%"><input type="submit" name="othBtn2" id="othBtn2" value="Add to Request" class="btn btn-success" /></td>
    </tr>
    <tr id="oth3">
    <th width="26%">Other Request (3):<small>  &nbsp;(Attachment Required) <i> Attach each other request per line</i></small></th>
    <td width="33%">Description:<input type="text" name="tdesc3" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt3" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
    <td>File(3):<input type="file" name="jfile3"/></td>
    <td width="29%"><input type="submit" name="othBtn3" id="othBtn3" value="Add to Request" class="btn btn-success" /> </td>
    </tr>
    <tr id="oth4">
    <th width="26%">Other Request (4):<small>  &nbsp;(Attachment Required) <i> Attach each other request per line</i></small></th>
    <td width="33%">Description:<input type="text" name="tdesc4" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt4" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
    <td>File(4):<input type="file" name="jfile4"/></td>
    <td width="29%"><input type="submit" name="othBtn4"  id="othBtn4"value="Add to Request" class="btn btn-success" /> </td>
    </tr>
    <tr id="oth5">
    <th width="26%">Other Request (5):<small>  &nbsp;(Attachment Required) <i> Attach each other request per line</i></small></th>
    <td width="33%">Description:<input type="text" name="tdesc5" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt5" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
    <td>File(5):<input type="file" name="jfile5"/></td>
    <td width="29%"></td>
    </tr>
</table>

Answer 1

You have a couple of issues.

1. You are missing a opening bracket for your table <.

2. You are missing the # in your selector.

Change,

table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">

to,

<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">

and change,

$("#othBtn1").click(function() {
    $("#oth2").show();
    $("oth1").hide();
    $("oth3").hide();
    $("oth4").hide();
    $("oth5").hide();
});
$("#othBtn2").click(function() {
    $("#oth3").show();
    $("oth1").hide();
    $("oth2").hide();
    $("oth4").hide();
    $("oth5").hide();
});

to,

$("#othBtn1").click(function() {
    $("#oth2").show();
    $("#oth1").hide();
    $("#oth3").hide();
    $("#oth4").hide();
    $("#oth5").hide();
});

$("#othBtn2").click(function() {
    $("#oth3").show();
    $("#oth1").hide();
    $("#oth2").hide();
    $("#oth4").hide();
    $("#oth5").hide();
});