使用jquery在表中生成文本框

Question

假设这是下面的准备表。并且每行3行都有一个文本框，旁边有2个按钮+或添加和 - 用于删除。当我单击+连续时，将生成一个新的文本框，当我单击时 - 文本框将删除。如下面的示例：

---

有人可以建议此步骤或程序的片段吗？

谢谢

Answer 1

你可以在这些方面写一些东西：

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes are allowed");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });
});
</script>

如果你不想动态创建div，你可以找到你上一个表行的id，添加1，创建表行，然后将文本框创建html附加到它。

Answer 2

假设html结构如下

<table border = "1">
<thead>
    <tr><td> Text Boxes </td></tr>
</thead>
<tbody>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
    <tr><td><button class="add-text-box">+</button><button class="remove-text-box">-</button></td></tr>
</tbody>

以下jquery代码段应该可以使用

$(".add-text-box").click(function(){
    $(this).parent().prepend(" <input class='text-box' /> <br>");
});

$(".remove-text-box").click(function(){
    textboxes = $(this).parent().find('.text-box'); 
    $(textboxes).last().remove();
    if (textboxes.length === 0) {
        $(this).siblings().remove();
        $(this).remove();
    }        
});

您可以在行动here

中看到它