Question

我有一个带有匹配的表格，当我点击奇数时，它显示在一个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>

这是我的Javascript：

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

我希望当我点击1，x或2来显示：

Team1-Team2 Odd

Etoile - Bizertin 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>

我希望这有助于解决您的问题。

获取选定的单元格元素数据表

2 个答案: