2017-12-27 39 views
1

일치 항목이있는 표가 있습니다. 홀수를 클릭하면 div에 클릭 된 홀수가 표시됩니다. 이건 내 자바 스크립트입니다선택한 셀 요소 데이터 테이블 가져 오기

<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 심박 측정기 홀수

Etoile - Bizertin 1.34

답변

1

Table.cell(this)은 의미가 없습니다. .

#selectedOption div에 팀 이름을 삽입하지 못하도록 index()을 사용하여 조건을 추가했습니다.

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

나는 팀 이름을 표시하고 싶지만, 어떻게하는지 모른다. – Raina21

+0

Etoile - Bizertin 1.34 – Raina21

+0

@ Raina21 : https://jsfiddle.net/obvr604x/와 같은 것? 나는 jsfiddle의 데이타 테이블을 링크하지 않았다. – panther

1

이것은 내가 생각했던 것입니다.

$(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>

나는이 문제를 도움이되기를 바랍니다

.