如何输入数字到文本框Jquery附加

时间：2017-10-31 16:12:56

标签： javascript jquery html

我想在文本框中插入数字，但是当我添加行时，我无法插入，如何插入以追加文本框？ 

<script>
$('document').ready(function(){
var counter = 0;
$("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 3;
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" name="item' + counter + '"/></td>';
    cols += '<td><input type="text" name="stock' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
});

$('#stock').val(0);
    var nilai1 = $('#stock').val();     
    $('.angka').click(function(){
        if($('#stock').val()==0){
            nilai1 ='';
        }
        nilai1 += $(this).val();
        $('#stock').val(nilai1);
    });
});
</script>

可以帮助我吗？有关详细信息，请preview

4 个答案:

答案 0 :(得分：1)

你能更好地解释一下你的问题吗？在我看来，你正在尝试使用[1] [2] [3]按钮在所选文本框中写入一个值，而只是将它转到第一个。 如果我没有误解你，你的问题就在这段代码中：

var nilai1 = $('#stock').val();     
    $('.angka').click(function(){
        if($('#stock').val()==0){
            nilai1 ='';
        }
        nilai1 += $(this).val();
        $('#stock').val(nilai1);

基本上你的nila1变量总是指向#stock引用的DOM对象，因此你总是会在那个特定的文本框中写。

我不建议使用纯JQuery来做这种dinamic绑定，或者你至少可以重新考虑这些按钮的设计。

一旦你能更好地解释你的问题，我会尽力为你保留这个概念写下解决方案。

答案 1 :(得分：1)

选择任何字段，无论是否动态添加，您都可以在所选文本字段中添加值

var counter = 0;
var sItem;
$(document).on('click', '.dumy', function(){
    sItem = $(this);
    
});
    $("#addrow").on("click", function () {
        counter = $('#myTable tr').length - 3;
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" name="item' + counter + '"/></td>';
        cols += '<td><input type="text" class="dumy" name="stock' + counter + '" id="stock' + counter + '"/></td>';
        cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });

    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        
        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Row");
    });
    
    $('#stock').val(0);
				
		$('.angka').click(function(){
    var nilai1 = $(sItem).val();
			 if($(sItem).val() == 0){
       nilai1 ='';
       }
			nilai1 += $(this).val();
			$(sItem).val(nilai1);
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item" />
            </td>
            <td>
                <input type="text" name="stock0" class="dumy" id="stock" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>

答案 2 :(得分：0)

最简单的方法是在创建输入时为其添加一个值：

＆＃13;
＆＃13; 
(function($) {
  let counter = 0;
  
  $("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 3;
    const newRow = $("<tr>");
    let cols = "";
    cols += '<td><input type="text" name="item' + counter + '" /></td>';
    cols += '<td><input type="text" name="stock' + counter + '" value="0" /></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });

  $("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
  });

  $('#stock').val(0);
  var nilai1 = $('#stock').val();		
  $('.angka').click(function(){
    if($('#stock').val()==0){
      nilai1 ='';
    }
    nilai1 += $(this).val();
    $('#stock').val(nilai1);
  });
})(jQuery)
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item" />
            </td>
            <td>
                <input type="text" name="stock0" id="stock" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

(function($) {
  let counter = 0;
  
  $("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 2;
       $('#current').val(counter);
    const newRow = $("<tr>");
    let cols = "";
    cols += '<td><input type="text" name="item' + counter + '"  id="item' + counter + '"  /></td>';
    cols += '<td><input type="text" name="stock' + counter + '" id="stock' + counter + '" value="0" /></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete" /></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;

  });

  $("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
  });

  $('#stock').val(0);
	
  $('.angka').click(function(){

  rownumber = $('#current').val();
    alert(rownumber);
  var nilai1 = $('#stock'+  rownumber ).val();	
    if($('#stock'+rownumber).val()==0){
      nilai1 ='';
    }
    nilai1 += $(this).val();
    $('#stock'+rownumber).val(nilai1);
  });
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
					<input type="button" class="angka" value="1" id="satu">
					<input type="button" class="angka" value="2" id="dua">
					<input type="button" class="angka" value="3" id="tiga">
          <input type="hidden" id="current" value="" />
          </div>
<table id="myTable" class="order-list">
    <thead>
    <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
        <tr>
            <td>Item</td>
            <td>Stock</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="item0" id="item0" />
            </td>
            <td>
                <input type="text" name="stock0" id="stock0" rel="0" value="0" />
            </td>
            <td><a class="deleteRow"></a>

            </td>
        </tr>
    </tbody>
</table>

相关问题
最新问题