javascript - 通过点击按钮获取一行的id和value

Question

我有一个来自 DataTable 插件的表格，其中的数据由服务器端接收。在此表中，我有一列有一个按钮，单击该按钮会打开一个模式。在此模式中，我想显示一些信息，如名称、接收的字节数、发送的字节数等。

我需要获取第一个 td 的名称(值)，因为从该名称将在 mysql 中进行选择并捕获数据并显示此模态。

我尝试“$(this).closets(tr) and first td”的方式，当我使用alert()时，没有在弹出窗口中显示任何信息。

图片:

我的 javascript 代码:

$(document).ready(function() {
var table = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'ajax.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  if ( aData[2] == "true") {
    $('td:eq(2)', nRow).html( '<span class="ui green  label">Conectado</span>' ); 
  }
  if ( aData[2] == "false") {
    $('td:eq(2)', nRow).html( '<span class="ui red label">Desconectado</span>' ); 
  }
  if ( aData[1] == "true") {
    $('td:eq(1)', nRow).html( '<span class="ui red label">Bloqueado</span>'  ); 
  }
  if ( aData[1] == "false") {
    $('td:eq(1)', nRow).html( '<span class="ui green  label">Desbloqueado</span>' ); 
    }


},
"lengthMenu": [5, 10, 20, 25],
"language": {
  "search": "Busca rápida:",
  "emptyTable": "Desculpe, não há nada para mostrar.",
  "info": "Registro _START_ até _END_ de _TOTAL_ registros",
  "infoEmpty": "Nada foi encontrado em ",
  "infoFiltered": "um total de _MAX_ registros.",
  "lengthMenu": "Exibir _MENU_ registros",
  "processing": "<i class='notched circle loading icon'></i> Processando",
  "zeroRecords": "Desculpe, nada foi encontrado.",
  "paginate": {
    "first": "Primeiro",
    "last": "Último",
    "next": "Próximo",
    "previous": "Anterior"
  }
},
"columnDefs": [
  { 
      "targets": 3,
      "render": function(data, type, row, meta){
         return "<button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'><i class='options icon'></i></button>";  
      }
  }            
  ]     
  });


  });
  function teste() {
  $('.ui.modal')
  .modal({ detachable:false, observeChanges:true         }).modal('show').modal('refresh');
  }

    function myFunction() {

    $.ajax({
    url: 'api.php',
    type: 'POST',
    success: function(datas){
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Desconexão", "Conexão"],
          datasets: [{
              label: '# Quantidade',
              data: [datas[1], datas[3]],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
}
  });
 }

我的 html:

  <div class="panel-body">
<table class="ui small table" id="example">
  <thead>
    <tr>
      <th>Chave</th>
      <th>Bloqueio</th>
      <th>Conexão</th>
      <th>Ação</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>

      <th>Chave</th>
      <th>Bloqueio</th>
      <th>Conexão</th>
      <th>Ação</th>
    </tr>
  </tfoot>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
        <!-- <canvas id="myChart" width="400" height="400"></canvas> -->
        <div class="row">
        <div class="col-md-5"><canvas id="myChart" width="400" height="400"></canvas></div>
        <div class="col-sm-3"><h4>Name: </h4> <h4>Bytes Received:</h4><h4>Bytes Sent:</h4><h4>Real Address</h4><h4>Virtual Address</h4></div>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我建议您不要尝试在其他地方 中查找信息，例如呈现包含按钮的表格，而是呈现包含所有需要信息的按钮。

看，您有按钮的模板:

"render": function(data, type, row, meta){
         return "<button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'><i class='options icon'></i></button>";  
      }

如您所见，函数中包含所有需要的信息，因此您可以将其呈现为属性，如下所示:

"render": function(data, type, row, meta){
             return "<button class='ui icon button js-modal-btn' data-chave="+ row[0] +"><i class='options icon'></i></button>";  
          }

现在，如您所见，按钮有一个属性，它保存 row 变量的值，我假设它是一个数组，第一个元素是您需要的。 (如果您不确定，只需在渲染函数中创建一个 console.log(row)。

现在您可以在点击 handle 上使用变量:

$(document).on('click', '.js-modal-btn', function(){

   var $this = $(this);
   var firstColumnName = $this.attr('data-chave');

   //go on
})

请不要使用 onclick 内联句柄。