Question

我是奥地利的老师，我们必须使用jquery访问扩展表。这是一个例子：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function() {
    var htm="<tr><td>1</td><td>1a</td><td>1b</td></tr><tr><td>2</td><td>2a</td><td>2b</td></tr><tr><td>3</td><td>3a</td><td>3b</td></tr>";
    $("#test").html(htm);
    // here we expand the table
    $("#show").click(function(){
      var htm="<tr><td>4</td><td>4a</td><td>4b</td></tr><tr><td>5</td><td>5a</td><td>5b</td></tr><tr><td>6</td><td>6a</td><td>6b</td></tr>";
      $("#test").html(htm);
    });
    // --------------      this part onle works for the first 3 rows
    var obj=$("#test tr");
    obj.click(function() {
        var ind=obj.index(this);
        var x=$(this).children(':nth-child(2)').text();
        alert(ind + "x: "+x );
    });
});
</script>
</head>
<body>
<p id="show">start</p>
<table id="test"></table>
</body>
</html>

我们可以用jQuery访问3个扩展行。我们需要它为学生项目。

Answer 1

使用事件委托：

$("#test").on('click','tr',function() {
    var ind= $("#test tr").index(this);
    var x=$(this).children(':nth-child(2)').text();
    alert(ind + "x: "+x );
});

工作Demo

........

另请参阅this和this。

Answer 2

我会像这样更改你的代码：

$(document).ready(function() {

for(var i =0; i<6;i++){
$("#test").append('<tr><td>'+i+'</td></tr>');
}

    // here we expand the table
    $("#show").click(function(){

      $("#test").html('');
      for(var i =0; i<6;i++){
$("#test").append('<tr><td>'+i+'b</td></tr>');
}
      $("#test").html(htm);
    });
    // --------------      this part onle works for the first 3 rows
    var obj=$("#test tr");
    obj.click(function() {
        var ind=$(this).index();
        var x=$(this).find('td:eq(2)').text();
        alert(ind + "x: "+x );
    });
});

告诉是否可以。并纠正不起作用

jQuery访问动态扩展HTML表

2 个答案: