5

javascript を使用して、表示される順序に応じて<input/>動的id(属性は同じ) のタグを作成したいと考えています。name

プレーンな htmlの最初のタグと、クリックしたときに増分された ID を持つ<input/>新しいタグを追加する必要がある div があります。<input/>

<input type="text" name="1" id="1" />
<div class="add_new" onClick="add_new_input()">+</div>

ここで、javascript は<input/>現在表示されている s の量をカウントし (count)、その量を使用して動的id(count+1) を生成する必要があります。

したがって、<div class="add_new"><..を 2 回クリックすると、出力は次のようになります。

<input type="text" name="1" id="1" />
<input type="text" name="2" id="2" />
<input type="text" name="3" id="3" />

<input/>jquery を使用してフォームに新しいタグをappend()追加すると、以前に追加された<input/>s に追加されますか? <input/>または、 one 、次に two、次に three などを追加する必要がありますか?

また、JavaScript を使用して<input/>現在表示されている s の数をカウントするにはどうすればよいですか?

4

7 に答える 7

7

あなたの要件に合ったスクリプトを使用しました。

HTML: 

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
    <label for="p_scnts">
        <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
    </label>
    </p>
</div>

Javascript :- 

  $(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function () {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
    });

    $('#remScnt').live('click', function () {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
    });
});

working demo

于 2013-11-15T05:44:58.943 に答える
4

のようにしてみてください

function add_new_input() {
   var last_id = $('input[type="text"]:last').attr('id');
   last_id++;
   $('input[type="text"]:last').append('<input type="text" name="'+last_id+' id="'+last_id+'">');
}
于 2013-11-15T05:39:52.700 に答える
1

働くフィドル

jQuery('#select').change(function () {
var val = jQuery(this).val();
var innerhtml = '';
for (var i = 0; i < val; i++) {
    innerhtml += "<input type='text' id='" + (i + 1) + "' name='" + (i + 1) + "'size=50>   </br>";
}
jQuery('#textbox_div').html(innerhtml);
});
于 2013-11-15T05:46:39.243 に答える
1

これを試して

function add_new_input(){
   var lastControlId = $('input:text:last').attr('id');
   if(!lastControlId){
    lastControlId = parseInt(lastControlId,10) + 1;
    $('#containerDiv').append('<input type="text" name="'+ lastControlId +' id="'+ lastControlId +'">');
  }
}
于 2013-11-15T05:44:42.443 に答える
0 
$( "input" ).each(function( index ) {
  $(this).attr('id', 'item-' + index);
});

これにより、「item-[インデックス番号]」の id を持つすべての入力が変更されます。

ただし、これがすべてに適用されるわけではないため、セレクターに .class 識別をスローする必要があります。

于 2013-11-15T05:46:21.183 に答える
0

プレーンな JavaScript を使用する

<script language="javascript">
    var x=1;
    function add_new_input(){
        x++;
        var input=document.createElement('input');
        input.setAttribute("id",x);
        input.setAttribute("type","text");

        document.getElementById("holder").appendChild(input);

    }
</script>

htmlは以下です

<div id="holder">
<input type="text" name="1" id="1" />
</div>
<div class="add_new" onClick="add_new_input()" >+</div>
于 2013-11-15T05:53:40.517 に答える
0 
var index = 1;


function add_fields() {

    index++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("tr");
    divtest.innerHTML = ("<tr><td class='slno'>" + index + "</td><td><input type='text'></td><td><button class='remove_button' onclick='myfn()'>remove</button></td></tr>");
    objTo.appendChild(divtest);
     $(".slno").each(function(index, element) {
            $(element).text(index + 1);

       });

}

function myfn() {
        $(".remove_button").parents('tr').first().remove();
        $(".slno").each(function(index, element) {
            $(element).text(index + 1);

        });
}
于 2017-04-01T05:34:10.660 に答える