フォームセクションの表示/非表示

Question

私は5つのフィールドにアップロード行があるテーブルを持っています。毎回、ページをリフレッシュします。ただし、最初の送信ボタンをクリックしたときに、次の行を表示して前の行を非表示にする必要があります。これは最後まで続くはずです。私は次のことを試しましたが、うまくいきませんでした。つまり、すべての行が表示されています。私はこの偉業を達成する方法についてのassitanceが必要です。

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

これは最後のボタンまで続きます。以下のHTMLを参照してください。

<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

あなたにはいくつかの問題があります。

1. テーブル用の括弧がありません<

2. セレクタに#がありません。

変更、

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

に、

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

と変更、

$("#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(); 
}); 

に、

$("#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(); 
}); 

Answer 2

あなたの例ではidセレクタの前に#がありませんでした。

そして、すべてを単一のイベントリスナーに簡単に結合できます。各ボタンごとに手動で行う必要はありません。

$("#tableRec input[id^=othBtn]").click(function() { 
 
    $("#tableRec tr").hide(); 
 
    $(this).closest("tr").next().show(); 
 
});

tr { 
 
    display: none; 
 
} 
 

 
tr:first-child { 
 
    display: table-row; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableRec"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><input type="submit" id="othBtn1" value="Add to Request" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td><input type="submit" id="othBtn2" value="Add to Request" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td><input type="submit" id="othBtn3" value="Add to Request" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td><input type="submit" id="othBtn4" value="Add to Request" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>5</td> 
 
    <td>table end</td> 
 
    </tr> 
 
</table>