動的拡張HTMLテーブルへのjQueryアクセス

-4

私はオーストリアの教師です。私はjqueryで拡張テーブルにアクセスする必要があります。我々はjQueryを使って3つの展開された行にアクセスするために何ができるか動的拡張HTMLテーブルへの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>

：はここでの例です。私たちは学生プロジェクトに必要です。

出典

2017-02-03 user3160706

使用イベントの委任：

$("#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を参照してください。

出典

2017-02-03 07:42:06

ありがとうございました。私はうまく動作してうれしいです！ – user3160706

私はこのようにコードを変更します：

$(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); 
    }); 
});

テルはOKの場合です。それを修正してください。

出典

2017-02-03 07:44:53

ありがとうございます。 – user3160706

動的拡張HTMLテーブルへのjQueryアクセス

答えて

関連する問題