2

私はjQueryが初めてです。ラベル付きの 2 つのテキスト ボックスを動的に追加し、[追加] ボタンをクリックし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

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

.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 に答える