javascript - 创建带有计数器的表

标签 javascript jquery

我有以下代码,并试图获取用户输入的数字,以创建一定数量的行,并在单元格中设置一个计数器,最多可达输入的数字(即,如果用户输入 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>

最佳答案

试试这个。我刚刚将 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);
      }
  });
});

关于javascript - 创建带有计数器的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34700291/

相关文章:

javascript - 如何让正则表达式匹配多个脚本标签?

javascript - Angular、ngRoute、routeProvider

jquery - TR 上的引导表动画不起作用

javascript - div逐渐淡出一边

javascript - 如何在 Cytoscape cola 中根据权重对节点进行分组

javascript - 独立移动元素js

javascript - 如何在选择选项时显示警报

javascript - 获取div中可用空间的高度和宽度

jquery - 无法将 JSON 数据加载到 jQuery sqlalchemy-datatable

javascript - 通过 Node js脚本将文档数组插入mongodb数据库时出现问题