Bootstrap table-striped点击获取td值

Question

我有一个 table table-striped 并且在哪一行有一个删除按钮。当用户单击删除按钮时，一个模式对话框会显示用户真正想要删除该行的询问 ID。

我需要获取要删除的值，如何获取id td？

function modalAvisoExclusao() {
  $('#confirmaExclusao').modal('show');
}

function excluirUO() {
  $('#confirmaExclusao').modal('hide');
  var table = $('#Lista').DataTable();
  var d = table.cell(this).data();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="form-horizontal">
  <div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Dele&ccedil;&atilde;o Permanente</h4>
        </div>
        <div class="modal-body">
          <p>Deseja realmente excluir este registro ?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-danger" id="confirmUo" onclick="excluirUO();">Excluir</button>
        </div>
      </div>
    </div>
  </div>

  <div class="panel-body">
    <table id="Lista" class="table table-striped table-bordered" style="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>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>0,800</td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                                            <i class='glyphicon glyphicon-pencil'></i> Alterar
                                        </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
                                            <i class='glyphicon glyphicon-trash'></i> Excluir
                                        </button>
          </td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>0,750</td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                                            <i class='glyphicon glyphicon-pencil'></i> Alterar
                                        </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
                                            <i class='glyphicon glyphicon-trash'></i> Excluir
                                        </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </div>
</form>

Answer 1

使用ligneSel获取你想要的数据。这是一个数组。

var table = $('#Lista').DataTable({
  select: 'single'
});
//Get selected row data
$('#Lista tbody').on('click', 'tr', function() {
  ligneSel = table.row(this).data();
  $('#user_').html(ligneSel[0]);
  alert(ligneSel)
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
</head>

<body>
  <form class="form-horizontal">
    <div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Dele&ccedil;&atilde;o Permanente</h4>
          </div>
          <div class="modal-body">
            <p>Deseja realmente excluir este registro <span id="user_"></span>?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-danger" id="confirmUo">Excluir</button>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-body">
      <table id="Lista" class="table table-striped table-bordered" style="width:100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>0,800</td>
            <td>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal">
                <i class='glyphicon glyphicon-pencil'></i> Alterar
              </button>

              <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmaExclusao">
                <i class='glyphicon glyphicon-trash'></i> Excluir
              </button>
            </td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>0,750</td>
            <td>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                <i class='glyphicon glyphicon-pencil'></i> Alterar
              </button>

              <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal">
                <i class='glyphicon glyphicon-trash'></i> Excluir
              </button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Action</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </form>
</body>

</html>

Bootstrap table-striped点击获取td值

Bootstrap table-striped get td value by click

html

jquery

bootstrap-modal