Javascript 通过单击按钮获取行的id和值

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

我需要获取first td的namevalue，因为从该名称中，将在mysql中执行select并捕获数据并显示此模式

当我使用alert时，我尝试$this.closetstr和first td的方式在弹出窗口中没有显示任何信息

图像：

我的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>

---

我建议您不要试图在其他地方查找信息，比如在保存按钮的渲染表中，而是使用所有需要的信息来渲染按钮

看，你有按钮的模板：

"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>";  
      }

---

请不要使用onclick内联句柄。

$this.parents'tr。如果这是您的按钮，请首先获取表行tr的第一个父级。如果我使用alert$this.parents'tr‌​'.首先，我得到[object]“alert”并不是所有问题的解决方案。。尝试调试JS代码..使用var row=$this.parents'tr‌​'.第一要获取行对象和行数据，请使用var data=oTable.fnGetDatarow；。。尝试alertJSON.stringify$this.parents'tr'。首先它应该发布obejct的内容。但正如@mmushtaq所指出的，警报并不是一个好的解决方案。使用console.log，它将为您提供更详细的console.log$this.parents'tr'。首先谢谢！你的解决方案帮了我大忙！你能解释一下为什么不建议吗？当你看到html时，你会有一种感觉，没有提到js。一点也没有。它很漂亮。只需包含或排除.js文件，即可随时附加或分离侦听器。您编写js，而不关心html。如果它在那里-js代码将工作。如果没有，js就不会坏。把一切都分开。”js以“js的类名，css的类名”开头。当然也没有内联css。我无法解释代码的美妙之处。

"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>";  
          }

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

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

   //go on
})