在数据表的隐藏列中获取 input[type=hidden] 的值

Question

我有这个 table，它有 2 列，personID 和 Name。第一列是隐藏的。我还添加了一个隐藏的输入字段。我这样做是因为每当我刷新页面时，我都能在一瞬间看到它的值。

我居然用了数据table。如果单击 table 正文，我想显示 personID。我的问题是我无法显示 personID。

<div class="row table-responsive">
  <table class="table table-bordered table-striped table-condensed" id="table_data"> 
    <thead class="header">
      <tr class="well">
        <th></th>
        <th>Person Name</th>
      </tr>
    </thead>

    <tbody>
      <?php if($result != NULL){?>
        <?php foreach($result as $row){ ?>
            <tr>
            <td> <input type="hidden" name="personID" id="personID" value="<?php  echo $row->personID;?>" />
            </td>
            <td ><?php echo $row->lname.", ".$row->fname." ".$row->mname;?></td>

        <?php }}?>

    </tbody>
  </table><!-- END Table-->
</div><!-- END table-responsive-->

javascript代码：

var table = $('#table_data').DataTable({
    "bLengthChange": false,
    "columnDefs": [
        {
            "targets": [ 0],
            "visible": false,
            "searchable": false
        }
    ]

});
 $('#table_data tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('active') ) {
        $(this).removeClass('active');
    }
    else {
        $(this).addClass('active');
        var d = $('input[type=hidden]', $(this).find("td:first")).val();
         alert(d);


    }
} );

我已经尝试过以下方法：

我在这里得到了一个未定义的结果：

var d =  $(this).parent('td').find('input[type="hidden"]').val();
var d = $('input[type=hidden]', $(this).find("td:first")).val();

这里没有显示警报：

var d=document.getElementById('personID').value;

它给了我这个结果，<input name="personID" id="personID" value="19" type="hidden">，当我尝试这个时：

 var d= $(this).parents('tr').find('input[type="hidden"]').val();

请帮帮我..

Answer 1

很难看出这里到底出了什么问题。有时您指的是代码片段中名称为 "personID" 的隐藏输入，有时指的是 "guestID"。如果您的实际代码中存在这种差异，显然会导致问题。

如果您确保呈现的 HTML 符合您的预期（使用 personID 作为隐藏输入的名称），那么以下应该有效：

$('#table_data tbody').on('click', 'tr', function () {

    var $tr = $(this);

    if ($tr.hasClass('active')) {

        $tr.removeClass('active');

    } else {

        $tr.addClass('active');

        // Use the input's name to find it within the <tr>
        var d = $tr.find('input[name=personID]').val();

        alert(d);
    }
});

示例：JSFiddle

那么，将整个 table 列仅用于隐藏输入似乎有点过分了。您可以简单地将隐藏的输入与人名放在同一列中 - 或者甚至将其作为 data attribute 存储在 table 行本身。此外，在您的 PHP 循环中，您为所有隐藏输入提供了相同的 "personID" ID，这在技术上是不正确的 - HTML 文档中的所有 ID 值都应该是唯一的。

在数据表的隐藏列中获取 input[type=hidden] 的值

Getting the value of input[type=hidden] in a hidden column of datatable

javascript

datatable

jquery

codeigniter