Question

我无法使用jQuery将行添加到表中。我想在id为myTable

的表中插入行

我的代码是

  <script src="js/jquery.js" type="text/javascript">
  </script>
  <script language="javascript">
  $('#covered').on('change', function () {
  var v = this.value;
  for (var i = 0; i < v; i++) {
    $('#myTable').append('<tr><td>new added row' + i + '</td><td> col 2</td></tr>');
    }
   });
  </script>

<table id='myTable'>
<tr>
    <td>col 1</td>
    <td>col 2</td>
</tr>
</table>
<select name="covered" id="covered">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

有人能帮助我吗？

Answer 1

如果您准备好文档，则工作正常（即使您一次添加两行）。

$(document).ready(function (){

     $('#covered').on('change', function () {
  var v = this.value;
  for (var i = 0; i < v; i++) {
    $('#myTable').append('<tr><td>new added row' + i + '</td><td> col 2</td></tr>');
    }
   });
});

JSFIDDLE

Answer 2

你必须初始化jquery：

$(function(){
   // code here
});

代码将起作用：

http://jsfiddle.net/2UvFT/

Answer 3

尝试将代码包装在 DOM ready 处理程序$(document).ready(function() {...});或更短的$(function(){...});内，以确保在执行您的所有DOM元素之前已正确加载jQuery代码：

$(function() {
    $('#covered').on('change', function () {
        var v = this.value;
        for (var i = 0; i < v; i++) {
            $('#myTable').append('<tr><td>new added row' + i + '</td><td> col 2</td></tr>');
        }
     });
});

<强> Fiddle Demo

Answer 4

将代码写入DOM ready：

$(document).ready(function(){
$('#covered').on('change', function () {
  var v = this.value;
  for (var i = 0; i < v; i++) {
    $('#myTable').append('<tr><td>new added row' + i + '</td><td> col 2</td></tr>');
   }
});});

<强> Demo

Answer 5

您必须将代码包装在doc ready块中：

$(function(){
    $('#covered').on('change', function () {
       var v = this.value;
       for (var i = 0; i < v; i++) {
           $('#myTable').append('<tr><......</td></tr>');
       }
    });
});

Demo with doc ready

如果您将事件委托给document，还有一种方法，那么不需要doc ready块，但我不建议您这样做，因为它在性能方面非常慢。

    $(document).on('change', '#covered', function () {
       var v = this.value;
       for (var i = 0; i < v; i++) {
           $('#myTable').append('<tr><......</td></tr>');
       }
    });

我无法使用jQuery将行附加到表中

5 个答案:

Demo with doc ready

Demo with delagated @ document