使用php从html表中获取data-id html

时间:2015-01-26 13:43:20

标签: javascript php jquery html

我有一个使用php从mysql表生成的html表。有ara属性html使用数据ex:data-id。但是为什么,数据id总是从该表的第一行开始有值?这是html

<table class="table table-bordered table-striped table-condensed">
<thead>
    <tr>
        <th>No.  </th>
        <th>No Request</th>
        <th>Username</th>
        <th>Waktu Kirim Request</th>
        <th>Keluhan</th>                                            
        <th>Status</th>
        <th>Estimasi Penyelesaian</th>                                            
        <th>Action</th>
    </tr>
</thead>   
<tbody>
    <tr>
        <td class="center">1.  </td>
        <td class="sorting1" id='no_request' data-id="002">TMS/IT/01/002</td>
        <td class="center">Hud Aditywan</td>
        <td class="center">25-01-2015, 21:04 </td>
        <td class="center">Text One</td>                                            
        <td class="center"><a href="#" onclick="changeStatus();"><span class="label label-important">Done </span></a></td> 
        <td class="center">25-01-2015, 21:34 </td>                                            
        <td  class="center">
            <a class="btn btn-info" href="#">
                <i class="halflings-icon white edit"></i>
            </a>

            <a class="btn btn-success" >
                <i class="halflings-icon white print" id="print"></i>
            </a>         
        </td>
    </tr>

    <tr>
        <td class="center">2.  </td>
        <td class="sorting1" id='no_request' data-id="007">TMS/IT/01/007</td>
        <td class="center">Hud Aditywan</td>
        <td class="center">26-01-2015, 00:11 </td>
        <td class="center">Another Text</td>                                            
        <td class="center"><a href="#" onclick="changeStatus();"><span class="label label-important">Not Yet </span></a></td> 
        <td class="center">26-01-2015, 00:41 </td>                                            
        <td  class="center">
            <a class="btn btn-info" href="#">
                <i class="halflings-icon white edit"></i>
            </a>

            <a class="btn btn-success" >
                <i class="halflings-icon white print" id="print"></i>
            </a>         
        </td>
    </tr>

</tbody>

我使用模态引导程序显示行的预览。     

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h2>Confirm</h2>
</div>

<div class="modal-body">
    <p id="id_preview"></p>
</div>

<div class="modal-footer">
    <a href="#" id="btn-footer" class="btn btn-danger" onclick="executeStatus();">Ya</a>
    <a href="#" class="btn" data-dismiss="modal">Tidak</a>   
</div>

这是Jquery的代码:

    function changeStatus() {
    var x;
    $('.label').click(function(e) {
        e.preventDefault();

        var $this = $(this);

        var $trData = $this.closest('tr').clone();
        $trData.find('td:last').remove();

        var $thData = $this.closest('table').find('thead').clone();
        $thData.find('th:last').remove();

        var $table = $('<table border="2"></table>');
        $table.append($thData).append($trData);

        $("#id_preview").html($table);
        $('#myModal').modal('show');
    });
}

function executeStatus() {
    $('#btn-footer').click(function(e) {
        e.preventDefault();

        var foo = $(".sorting1").data('id');
        alert(foo);

    });
}

我的问题是,为什么data-id总是有值= 002? 即使我有值007的行?

1 个答案:

答案 0 :(得分:0)

因为您总是访问第一项

function executeStatus() {
  $('#btn-footer').click(function(e) {
      e.preventDefault();

      var foo = $(".sorting1").data('id');
      alert(foo);

  });
}

您的函数从匹配&#34; .sorting1&#34;的第一个项目中获取数据ID。您可能想尝试

 $("#id_preview .sorting1").data('id')