Javascript 使用jquery在表内生成文本框

假设这是下面的准备表。三行中的每一行都有一个文本框，在文本框旁边有两个按钮+或添加和-用于删除。当我在一行中单击+时，将生成一个新的文本框，当我单击-时，文本框将被删除。如下图所示：

---

有人能推荐这个步骤或过程的代码片段吗

---

谢谢你

你可以在下面几行写点东西：

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

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}   
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}   
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
});

---

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

您可以在以下行中写入内容：

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

$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}   
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}   
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
});

---

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

假设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();
    }        
});

$（“.add文本框”）。单击（函数（）{
$（this.parent（）.prepend（
）；
});
$（“.remove文本框”）。单击（函数（）{
textboxs=$（this.parent（）.find（'.text box'）；
$（文本框）.last（）.remove（）；
如果（textboxs.length==0）{
$（this.sides（）.remove（）；
$（this.remove（）；
}        
});

​

---

假设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();
    }        
});

$（“.add文本框”）。单击（函数（）{
$（this.parent（）.prepend（
）；
});
$（“.remove文本框”）。单击（函数（）{
textboxs=$（this.parent（）.find（'.text box'）；
$（文本框）.last（）.remove（）；
如果（textboxs.length==0）{
$（this.sides（）.remove（）；
$（this.remove（）；
}        
});

​

---

你可以在行动中看到它

Kidmen不太好，但问题是当我单击-签名时，只剩下一个文本框，它应该与按钮或行一起消失，而不是thxKidmen不太好，但问题是当我单击-签名时，只剩下一个文本框，它应该与按钮或行一起消失，而不是thx