Question

我有以下代码，并且我试图获取用户输入的数字，以在单元格中创建具有计数器的行数，直到输入的数字（即，如果用户输入6,6行将显示为1 -6在其中，1在顶部）我认为for循环可以很好地工作，但我无法弄清楚哪些变量有效。任何帮助将不胜感激！

$(document).ready(function() {
  $('#nbrTxt').focus();

  var index = 1;
  $('input[name=nbrTxt]').on('keyup', function(e) {
    if (e.which === 13) {
      $('table').append('<tr><td></td><td></td></tr>');
      $('table tr:last td:first').html($(this).val());
      $('table tr:last td:last').html(index);
      $(this).focus().select();
      index++;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<title> JQuery Selector</title>

<style type="text/css"> 

body {
  font-family:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
   
}

</style>

<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>

</head>
<body>

  <h1>JQuery Selector</h1>

Enter Number: 
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>

  <table id="table" width="500" border="1">
  <tr>
  	<td>No. Count</td>
	<td>Name</td>
  </tr>
</table>
  
</body>

Answer 1

试试这个。我刚刚更改了keyup事件以点击，但它应该可以工作。

$(document).ready(function() {
  $('#nbrTxt').focus();

  $('#btnGo').on('click', function(e) {
        var value = $('#nbrTxt').val();

      for (var i = 1; i <= value; i++) {
          $('table').append('<tr><td></td><td></td></tr>');
          $('table tr:last td:first').html(value);
          $('table tr:last td:last').html(i);
      }
  });
});

Answer 2

是的，您可以使用for循环。

$(document).ready(function() {
  $('#nbrTxt').focus();

  $('input[name=nbrTxt]').on('keyup', function(e) {
    var index = parseInt($(this).val());

    if (e.which === 13) {
      for(var i = 1; i <= index; i++) {
        $('table').append('<tr><td>' + i + '</td><td></td></tr>');
        $(this).focus().select();
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<title> JQuery Selector</title>

<style type="text/css"> 

body {
  font-family:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
   
}

</style>

<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>

</head>
<body>

  <h1>JQuery Selector</h1>

Enter Number: 
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>

  <table id="table" width="500" border="1">
  <tr>
  	<td>No. Count</td>
	<td>Name</td>
  </tr>
</table>
  
</body>

用计数器创建表

2 个答案: