簡體   English   中英

如何在 jQuery/JavaScript 中獲取行 ID onClick?

[英]How to get the row id onClick in jQuery/JavaScript?

我有一個填充了動態數據的表。 最后一列有一個按鈕,當我單擊該按鈕時,我想將行 ID 傳遞給 JS function。 我需要 id,因為我正在執行 POST Ajax 請求,成功后我想獲取響應數據並使用新數據更新所選行。

這就是我要插入新行的方法:

var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();

但是我能做些什么來獲取行 ID 並使用響應數據更新它?

編輯。 數據表:

<table id="myTable" class="display compact" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Reg</th>  
                <th>Edit</th>                   
            </tr>
        </thead>
        <tbody>
            <?php foreach (get_all_customers_list() as $user) { ?>
                    <tr>
                        <td>
                            <b> <?php echo $user["recipient_name"]; ?></b>
                        </td>
                        <td>
                            <?php echo $user["registration_date"]; ?>
                        </td>                       
                        <td>
                            <button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>                             
                        </td>
                    </tr>
            <?php }?>
        </tbody>
 </table>

由於您只想獲取clicked的行編輯按鈕的row id 您可以簡單地使用table.row function 並傳遞單擊按鈕的實際tr

演示(顯示存儲為名稱的actual id (1, 2))

 var table = $('#myTable').DataTable({}) //edit customer here function edit_customer_request(_this) { //Getting the actual table ID var row = $(_this).parents('tr')[0]; //Data table row id console.log(table.row(row).data()[0]); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" /> <table id="myTable" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Reg</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Blah</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td> </tr>tr> <tr> <td>2</td> <td>Blah Nixon</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this,2)' value="2" name="edit_customer">Edit</button></td> </tr> </tbody> </table>

演示(顯示表的實際索引 - 索引從 0 開始到取決於您擁有的行數)

 var table = $('#myTable').DataTable({}) //edit customer here function edit_customer_request(_this) { //get the closest of clicked edit button var tr = $(_this).closest("tr"); //get the index of row var rowindex = tr.index(); //Index of row console.log(rowindex) }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" /> <table id="myTable" class="display compact" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Reg</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Blah</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td> </tr>tr> <tr> <td>2</td> <td>Blah Nixon</td> <td><button type="button" class="button_edit" onclick='edit_customer_request(this,2)' value="2" name="edit_customer">Edit</button></td> </tr> </tbody> </table>

這是我的簡單回答:


var table = $('#table-values');

$('#table-values').on( 'click', 'tr', function(){
    var id = this.id;

    alert( 'Clicked row id '+id );
  });

簡單的。 :)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM