2

我是 jQuery 的新手。我想动态添加两个带有标签的文本框，firstname然后lastname单击“添加”按钮。

<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个。同理，有没有办法删除文本框？

4

6 回答 6

5

演示

$('#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()

。附加（）

OP评论后更新

演示

$('#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-29T06:39:56.523 回答
1

希望下面的代码对你更有用

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

关联

于 2013-08-29T06:30:38.227 回答
1

我已经稍微修改了您的 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-29T06:42:48.897 回答
0

如果您有要删除的表或文本框的 id 或类，则可以使用.remove()jQuery 的功能。这是链接.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()取决于您的需要。

  1. 。附加（）
  2. .appendTo()

你的问题还不清楚，但我认为这就是你要找的。

于 2013-08-29T06:31:49.780 回答
0

你可以.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-29T06:41:04.143 回答
0 
<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-25T12:09:30.293 回答