我有下表：
<table border="1" cellpadding="5" class="test">
<tr>
<td id="1" data-value="50">aaa</td>
<td id="2" data-value="60">bbb</td>
<td id="3" data-value="70">cc</td>
</tr>
<tr>
<td id="4" data-value="80">ddd</td>
<td id="5" data-value="90">eee</td>
<td id="6" data-value="100">fff</td>
</tr>
<tr>
<td id="7" data-value="110">ggg</td>
<td id="8" data-value="120">hhh</td>
<td id="9" data-value="130">iii</td>
</tr>
</table>
我的腳本允許您每行和每列只能選擇一個表格單元格。選定的表格單元格在單擊時獲得“選定”類。
現在我需要所選表格單元格的“資料值”，它應該存盤在一個陣列中。因此，我嘗試了該map方法，但結果只是得到一個空陣列。
這是腳本和JS Fiddle：
$(document).on("click", ".test td", function() {
let index = $(this).index() 1;
$(this)
.closest('table')
.find('tr>td:nth-child(' index ')')
.removeClass('selected');
var col1 = $(this).addClass('selected').text();
var arr = $('.selected').map(function () {
return this.value
}).get();
console.log(arr);
});
uj5u.com熱心網友回復：
您正在檢索所選元素的value屬性而不是其data-value屬性值。
要獲取其data-value屬性值，您可以使用jQuery.data.
$(document).on("click", ".test td", function() {
let index = $(this).index() 1;
$(this)
.closest('table')
.find('tr>td:nth-child(' index ')')
.removeClass('selected');
var col1 = $(this).addClass('selected').text();
var arr = $('.selected').map(function() {
return $(this).data('value')
}).get();
console.log(arr);
});.selected {
background: #333;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellpadding="5" class="test">
<tr>
<td id="1" data-value="50">aaa</td>
<td id="2" data-value="60">bbb</td>
<td id="3" data-value="70">cc</td>
</tr>
<tr>
<td id="4" data-value="80">ddd</td>
<td id="5" data-value="90">eee</td>
<td id="6" data-value="100">fff</td>
</tr>
<tr>
<td id="7" data-value="110">ggg</td>
<td id="8" data-value="120">hhh</td>
<td id="9" data-value="130">iii</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352337.html
標籤：javascript 查询