Question

我正在尝试为每个选定的行添加列Position ，并将其添加到ID为items的列表中。

我设法选择了多少行而不是实际值。任何人都可以帮我这个吗？

PS：你必须点击

行

示例：如果我选择第一行和第二行，我应该会得到一个包含Accountant和System Architect

的列表

工作代码，您可以对其进行编辑。

$(document).ready(function () {
  var events = $('#events');
  var table = $('#example').DataTable({
    dom: 'Bfrtip',
    select: true,
    buttons: [{
      text: 'Get selected data',
      action: function () {
        var count = table.rows({selected: true}).count();
        events.prepend( '<div>'+count+' row(s) selected</div>');
      }
    }]
  });
});

#events {
  margin-bottom: 1em;
  padding: 1em;
  background-color: #f6f6f6;
  border: 1px solid #999;
  border-radius: 3px;
  height: 100px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div id="events">
  Row selected count - new information added at the top
</div>

<ul id="items"></ul>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用事件委派并在元素上附加单击处理程序。要获得$(document).on('click', 'table tr > td', function() { console.log($(this).parent().index() + ' ' + $(this).index()); // Will console.log the parent() index and also the index of the <tr> clicked on. $('ul#items').append('<li>' + $.trim($(this).text()) + '</li>'); return false; });的位置，您可以使用 index() jQuery函数并获取文本，您可以使用jQuery text() 功能，请尝试以下代码：

{{1}}

从表中获取价值

1 个答案: