JQuery创建按钮点击动态文本框

我是jQuery的新手。我想动态添加两个标签为firstname和lastname的文本框，单击“添加”按钮。JQuery创建按钮点击动态文本框

<table border="0" cellspacing="2"> 
      <tr><td style= "width:200px;" align="right">Name 
      <td> 
      <input type="text" id="current Name" value="" /> 
      </td></td> 
      </tr>      
        <tr> 
         <td align="right">Test value</td> 
         <td> 
          <select id="test" style= "width:350px;">        
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td align="right">datas</td> 
         <td> 
       <input type="button" id="add" value="Add" onclick="AddTables();"/>      

         </td> 
        </tr> 

        <tr> 
         <td style="height:3px" colspan="2"></td> 
        </tr> 
        <tr style="background-color: #383838"> 
         <td></td> 
              </tr> 
        <tr> 

        </tr> 
        <tr> 

         </div> 
         </div> 
         </td> 
        </tr> 
       </table>

http://jsfiddle.net/x7uQx/

我有添加文本框的限制。最多7.同样，还有一种方法可以删除文本框吗？

来源

2013-08-29 chinchu

如果要添加文本框，你可以请注明？ – Sharad

1）正确缩进你的HTML标记，2）澄清你的问题，3）添加你已经在JS中尝试过的东西 - 并希望你会得到对你的问题的赞扬，对你的代码有用的批评和一些很好的建议/例子。拥有近千的声望，你应该已经知道房子的规则;） –

以下加入按钮 – chinchu

DEMO

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length < 7) { 
     table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
    } 
}); 
$('#del').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length > 1) { 
     table.find('input:text').last().closest('tr').remove(); 
    } 
});

.closest()

.append()

OP的评论后更新

DEMO

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    console.log(table.find('input:text').length); 
    if (table.find('input:text').length < 7) { 
     var x = $(this).closest('tr').nextAll('tr'); 
     $.each(x, function (i, val) { 
      val.remove(); 
     }); 
     table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
     $.each(x, function (i, val) { 
      table.append(val); 
     }); 
    } 
}); 
$('#del').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length > 1) { 
     table.find('input:text').last().closest('tr').remove(); 
    } 
});

来源

2013-08-29 06:39:56

http://jsfiddle.net/x7uQx/15/同时点击添加或删除按钮如何在添加和删除按钮下方生成文本框而不是jodetails标题 – chinchu

@chinchu检查更新的演示 –

我希望下面的代码是你

<html> 
<head> 
<title>jQuery add/remove textbox example</title> 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<style type="text/css"> 
div{ 
    padding:8px; 
} 
</style> 

</head> 

<body> 

<h1>jQuery add/remove textbox example</h1> 

<script type="text/javascript"> 

$(document).ready(function(){ 

var counter = 2; 

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

if(counter>10){ 
     alert("Only 10 textboxes allow"); 
     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(); 

}); 

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

var msg = ''; 
for(i=1; i<counter; i++){ 
    msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
} 
     alert(msg); 
}); 
    }); 
</script> 
</head><body> 

<div id='TextBoxesGroup'> 
<div id="TextBoxDiv1"> 
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
</div> 
</div> 
<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Remove Button' id='removeButton'> 
<input type='button' value='Get TextBox Value' id='getButtonValue'> 

</body> 
</html>

Link

来源

2013-08-29 06:30:38 kondapaka

请添加一些代码。对于未来的访问者，一个无效的链接将会很有用:) –

如果你有答案，请在这里描述答案。只有链接的答案是不鼓励的。 – Krishnabhadra

更加有用如果您有表或文本框的ID或类，你要删除，那么你可以使用jQuery的.remove()功能。这里是链接.remove()

<script> 
$("button").click(function() { 
$("#id1").remove(); //this will remove your textfield or table or row from table whose id is id1 
}); 
</script>

对于添加你可以使用.append()或.appendTo()取决于您的需要。

您的问题尚不清楚，但我想这就是你要找的。

来源

2013-08-29 06:31:49

您可以使用.append()这样

$('input[type=button]').on('click', function() { 
$(this).append('<label for="firstname">first name</label> <input type="text" id="firstname"/>'); 
$(this).append('<label for="lastname">last name</label> <input type="text" id="lastname"/>'); 
});

使用.remove()删除元素这样

$('#firstname, label[for="firstname"]').remove(); 
$('#lastname, label[for="lastname"]').remove();

来源

2013-08-29 06:41:04 Praveen

jsfiddle.net/x7uQx/15 while点击添加或删除按钮我如何生成下面的添加和删除按钮，而不是jodetails标题 – chinchu

我已经修改了你的HTML点点。

<table id="tbl" border="0" cellspacing="2"> 
      <tr><td style= "width:200px;" align="right">Name 
      <td> 
      <input type="text" id="current Name" value="" /> 
      </td></td> 
      </tr>      
        <tr> 
         <td align="right">Test value</td> 
         <td> 
          <select id="test" style= "width:350px;">        
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td align="right">datas</td> 
         <td> 
       <input type="button" id="add" value="Add"/>      

         </td> 
        </tr> 

        <tr> 
         <td style="height:3px" colspan="2"></td> 
        </tr> 
        <tr style="background-color: #383838"> 
         <td></td> 
              </tr> 
        <tr> 

        </tr> 
        <tr> 

         </div> 
         </div> 
         </td> 
        </tr> 
       </table>

这里是jQuery代码

$(document).ready(function(){ 
$("#add").bind("click",AddTables); 
function AddTables(e) 
    { 
     if($("#tbl tr[addedrow='yes']").length<7) 
     { 
     $("#tbl").append("<tr addedrow='yes'><td>First Name</td><td><input type='text'/></td></tr><tr><td>Last Name</td><td><input type='text'/></td></tr>"); 
     } 
    } 

});

你可以看到它http://jsfiddle.net/x7uQx/12/

您可以将这些也使用.remove()删除。

来源

2013-08-29 06:42:48 Sharad

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#ddlSelect").change(function() 
      { 
       $("#divTxtGroup").empty();    
       var num = this.value; 
       if (num > 0) { 
        for (i = 1; i <= num; i++) { 
         var newTextBoxDiv1 = $(document.createElement('div')).attr("id", 'divTxt' + i); 
         newTextBoxDiv1.after().html('<label>Textbox ' + i + ' : </label><input type="text" id="txt' + i + '">'); 
         newTextBoxDiv1.appendTo("#divTxtGroup"); 
        } 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <select id="ddlSelect" name="ddlSelect"> 
     <option value="0">-----Select-----</option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 
    <div id='divTxtGroup'></div> 
</body>

来源

2015-06-25 12:09:30

你还可以描述你的答案吗？为什么它比别人更有用？ – ZygD

JQuery创建按钮点击动态文本框

回答

相关问题