javascript - 使用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();
    }        
});

​你可以在这里看到它的作用