如何将值放入一行 html 数据表？答案

【问题标题】：How can I get value into a row of html datatable?如何将值放入一行 html 数据表？
【发布时间】：2015-12-07 17:18:02
【问题描述】：

我有一个 php 文件，其中包含从 dataTable.net 获取的表格

我用这段代码加载我的表格和内容：

<div class="table-responsive">
     <div class="panel-responsive">
        <div class="panel-heading" align="center"><h3>Usuarios</h3></div>
    <table id="example" class="display" cellspacing="0" width="100%">

        <?php 
        //require_once('funciones.php');
        //conectar('localhost', 'root', '', 'agroapp');
        $result = mysql_query("SELECT * FROM usuario WHERE username <> 'admin'"); 

  if ($row = mysql_fetch_array($result)){ 
  ?>
  <thead>
  <tr> 
  <th>Username</th>
  </tr>
  </thead>
<tfoot>
        <tr>
            <th>Username</th>
        </tr>
         </tfoot>

 <tbody>

 <?php
  do { 
    $titulo=$row['nombre'];
    $post = $row['username'];
    $rol = $row['rol'];
    $idUser = $row['idUsuario'];

        echo "<tr > \n"; 
          //if($row["username"]!="admin"){
        //echo "<td >  </td> \n";
        echo "<td ><img src= ".$row["ruta"]." height='30' width='30 class=profile-photo img-circle'>  ".$row["username"]." </td> \n";


        echo "</tr> \n"; 
        //}
     } while ($row = mysql_fetch_array($result)); 
       //echo "</tbody></table> \n"; 
} else { 
    echo '<h5 align="center">¡ No tiene empleados añadidos! </h5>'; 
} 
 ?>

</tbody>
</table>
</div>
</div>

当我单击带有下一个代码的行时，我添加了一个选定的值，但我无法获取值 username，因为我进入了从 jquery 调用的 php 文件中的 [object object] 或未定义。这是使用时得到的：

 myFunction(table.row('.selected').value);

我也尝试使用 table.row('.selected').eq(0).data('username') 和 value('username')...但我无法获得值。

<script>
$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );

$('#button').click( function () {

    myFunction(table.row('.selected').eq(0).data('username'));  //Here I'm trying get the value
    table.row('.selected').remove().draw( false );
 } );
} );
function myFunction(val) {

var getted = val;

        $.ajax({
data: 'empleado=' + getted,
url: 'updateEmpleado.php',
method: 'POST', // or GET
success: function(msg) {
    //alert(msg);
    location.reload();
}
});
}

 </script>

如何获取所选行的值？谢谢！

【问题讨论】：

尝试获取<td>元素的值时，可以使用：document.getElementById ( "id-of-td" ).textContent
行没有任何特定值。它们有单元格，即td 元素，例如有textContent 和innerHTML。
请stop using mysql_* functions。 These extensions 已在 PHP 7 中删除。了解PDO 和 MySQLi 的 prepared 语句并考虑使用 PDO，it's really pretty easy。

标签： javascript php jquery mysql datatable

【解决方案1】：

你可以试试这个：

var table = $('#example').DataTable();
var myData;
$('#example tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    myData = table.row( this ).data();
} );

$('#button').on('click', myFunction);

function myFunction(){
        var getted = myData.username;

        $.ajax({
           data: 'empleado=' + getted,
           url: 'updateEmpleado.php',
           method: 'POST', // or GET
           success: function(msg) {
              //alert(msg);
             location.reload();
           }
       });
       table.row('.selected').remove().draw( false );
}

参考：https://datatables.net/reference/api/row().data()

【讨论】：

【解决方案2】：

您应该监听相应的事件（设置事件处理程序）并使用 API 进行数据检索或直接从 DOM 中获取。

https://datatables.net/reference/event/select

【讨论】：