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

你有几个问题。

您缺少表格<的左括号。
您缺少选择器中的#。

更改，

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>

隐藏/显示表单部分

2 个答案: