Question

嗨，请帮助我。我在表格的一行中分别创建了名称为qty，serialno和description的文本框。在文本框描述之后，我放了一个加号按钮，显示另一个文本框，下面的文本框与第一个文本框相同。我的问题是如何连续添加最多10行文本框。任何帮助都会谢谢！

这是我的标记：

<table>
    <tr>
    <td width="6"></td>

    <td align="left" width="3">Quantity<font color="#990000">*&nbsp;&nbsp;</font><input id=
    "qty" name="qty" type="text"></td>

    <td width="8">S/N<font color="#990000">*&nbsp;&nbsp;</font><input id="serialno" name=
    "serialno" type="text"></td>

    <td width="140">Desription<font color="#990000">*</font></td>

    <td><input id="desc" name="desc" required="required" type="text"></td>

    <td align="left" width="8"><button id="addreturn">+</button></td>
</tr>

<tr id="returnplus">
    <td id="returnplus" width="6"></td>

    <td align="left" id="returnplus" width="3">Quantity<font color=
    "#990000">*&nbsp;&nbsp;</font><input id="qty2" name="qty2" type="text"></td>

    <td id="returnplus" width="8">S/N<font color="#990000">*&nbsp;&nbsp;</font><input id=
    "serialno2" name="serialno2" type="text"></td>

    <td id="returnplus" width="140">Desription<font color="#990000">*</font></td>

    <td id="returnplus"><input id="desc2" name="desc2" type="text"></td>
</tr>

这是javascript：

< script > 
$(document).ready(function() {
    $("#returnplus").hide();
    $("#addreturn").click(function() {
        $("#returnplus").show("slow");
    });
}); 
< /script>

Answer 1

下面的代码会在点击textbox按钮时生成htmlvalue中提到的+元素。

   var count = 1 ;
   $("#addreturn").click( function (e) {
   var htmlvalue = ' var htmlvalue = '<br>
  <br> ';
  <table>
  <tr>
    <td align="left" width="3">
      Quantity*&nbsp;&nbsp;<input id="qty" name="qty" type="text">
    </td>
    <td width="8">
      S/N*&nbsp;&nbsp;<input id="serialno" name="serialno" type="text">
    </td>
    <td width="140">
      Desription*
    </td>
    <td>
      <input id="desc" name="desc" required="required" type="text">
    </td>
    <td align="left" width="8"></td>
  </tr>
</table>';

   if(count <= 10)
          $("body").append(htmlvalue);  
       else
          e.preventDefault();
    count = count + 1;

});
});

另外，请检查 DEMO FROM HERE

Answer 2

更改你的html和JS。按类替换id

<table>
   <tr>
    <td width="6"></td>
    <td width="3" align="left">Quantity<font color="#990000">*&nbsp;&nbsp;</font><input type="text" name="qty" id="qty" />
    <td width="8">S/N<font color="#990000">*&nbsp;&nbsp;</font><input type="text" name="serialno" id="serialno"  />
    <td width="140" >Desription<font  color="#990000">*</font></td>
    <td><input type="text" name="desc" id="desc" required= "required"/></td>
    &nbsp;&nbsp;&nbsp;&nbsp;<font color="#990000"></font>
    </td>
    <td width="8" align="left"><button id="addreturn">+</button></td>
  </tr>
  <tr class="returnplus">
    <td width="6"></td>
    <td width="3" align="left">Quantity<font color="#990000">*&nbsp;&nbsp;</font><input type="text" name="qty2" id="qty2"/>
    <td width="8">S/N<font color="#990000">*&nbsp;&nbsp;</font><input type="text" name="serialno2" id="serialno2" />
    <td width="140">Desription<font  color="#990000">*</font></td>
    <td><input type="text" name="desc2" id="desc2" /></td>
  </tr>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.returnplus').hide();
        $('#addreturn').click(function(){
           $('.returnplus').show();
        });
     });
</script>

如果单击按钮，则在表格中每行连续显示文本框

2 个答案: