點擊特定單元格時獲取​​的數據屬性

Question

這是我的HTML代碼。
單擊單元格時，如何獲取數據屬性的值？

<td id = "orderIds" data-cids="213,431">orders</td> 

當我點擊<td>單元格時，應該使用什麼來觸發事件？

Answer 1

通過使用has-attribute selector（可選）選擇單元格並使用data()方法獲取數據屬性值來綁定單擊事件處理程序。

$('td[data-cids]').click(function() { 
 
    console.log($(this).data('cids')); 
 
    // or use `this.dataset.cids` 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td data-cids="213,431">orders</td> 
 
    <td data-cids="123,234">orders</td> 
 
    </tr> 
 
</table>

Answer 2

請查看下文提到的解決方案。

$('td').click(function(){ 
 
    alert($(this).data('cids')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td id = "orderIds" data-cids="213,431">orders</td> 
 
    <td data-cids="23,43">12</td> 
 
    <td data-cids="21,41">23</td> 
 
    <td data-cids="13,31">34</td> 
 
</tr> 
 
</table>

Answer 3

純JS ...

orderIds.onclick=function(){ 
    console.log(this.dataset.cids) 
} 

你也可以使用$('#orderIds)與jQuery

Answer 4

需要單擊的單元格的數據屬性，因此使用這將做要緊的。使用下面的代碼段，它應該工作。

$('td').click(function(){ 
     var data = $(this).data('cids'); 
})