隱藏/顯示錶格部分

Question

我有一個表格，其中有五個字段有上傳行。每次我提交一行，頁面刷新。但是，我想隱藏所有4行，當第一個提交按鈕被點擊時，它應該顯示下一行，並隱藏前一行。這應該繼續，直到最後一個。我已經嘗試了以下，但沒有工作。即所有行正在顯示。我需要幫助如何實現這一壯舉。

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