選択されたセル要素のデータセットを取得する

Question

私は、奇数をクリックするとdivにクリックされた奇数が表示されます。これは私のJavascriptで

<table class="table table-bordered" id="display1" name="display1"> 
<thead> 
    <tr> 
    <th>Teams</th> 
    <th>1</th> 
    <th>X</th> 
    <th>2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Etoile - Bizertin</td> 
    <td><a href="#">1.34</a></td> 
    <td><a href="#">0.34</a></td> 
    <td><a href="#">0.35</a></td> 
</tr> 
</tbody> 
</table> 
<div id="selectedOption"></div> 

： は、これが私のテーブルです

<script> 
var table = $('#display1').DataTable(); 
$('#display1 tbody').on('click', 'td', function() { 
    $("#selectedOption").html(table.cell(this).data()); 
}); 
</script> 

私がしたいこと、私は、ディスプレイに1、xまたは2をクリックしてください：

Team1-Team2奇数

エトワール - ビゼルテン1.34

Answer 1

Table.cell(this)はノンセンス。

index()を使用して条件を追加し、チーム名を#selectedOption divに挿入しないようにしました。

var table = $('#display1').DataTable(); 
$('#display1 tbody').on('click', 'td', function() { 
    // prevent click to the first cell with team names 
    if ($(this).index() !== 0) { 
     $("#selectedOption").html($(this).text()); 
    } 
}); 

Answer 2

これは私が推測するものです。

$(document).ready(function(){ 
 
var table = $('#display1').DataTable(); 
 
table.on('click','td,th', function() { 
 
    $("#selectedOption").html($(this).text()); 
 
}); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 
 
<table class="table table-bordered" id="display1" name="display1"> 
 
<thead> 
 
    <tr> 
 
    <th>Teams</th> 
 
    <th>1</th> 
 
    <th>X</th> 
 
    <th>2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
    <td>Etoile - Bizertin</td> 
 
    <td><a href="#">1.34</a></td> 
 
    <td><a href="#">0.34</a></td> 
 
    <td><a href="#">0.35</a></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
<div id="selectedOption"></div>

私はこれがあなたの問題に役立ちます願っています。