英文:
Extraction of values with scope 'row' from html table
问题
我需要提取“Player”列中的所有值。我该如何做呢？
我尝试了以下方法，但它并不起作用：
var table = $("#table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
playerId = $tds.eq(0).text();
});
你可以尝试以下代码来提取“Player”列中的所有值。
英文:
I have a table:
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
I need to extract all values from the 'Player' column. How can I do it?
I tried this way but it doesn't work in the proper way:
var table = $("#table tbody");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
productId = $tds.eq(0).text();
});
答案1
得分: 1
你的代码有一些问题："#table" id 不存在，你选择的是 td，而实际数据在 th，你忘记将数据推送到数组中。
你可以使用属性选择器 [scope='row'] 获取球员数据。
var table = $("table");
var players = [];
table.find('tr').each(function (i) {
var $tds = $(this).find("[scope='row']");
if ($tds.length > 0) {
var productId = $tds.eq(0).text();
players.push(productId);
}
});
console.log(players);
或者你可以使用 'map' 方法来缩短语法：
const players = $("table [scope='row']").map((index, el) => $(el).text()).get();
console.log(players);
英文:
Your code has some issues: "#table" id does not exist, you are selecting td, when your data is in th, you forgot to push data to array.
You can use attribute selector [scope='row'] to get players data.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var table = $("table");
var players = [];
table.find('tr').each(function (i) {
var $tds = $(this).find("[scope='row']");
if($tds.length>0){
productId = $tds.eq(0).text();
players.push( productId);
}
});
console.log(players);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
<!-- end snippet -->
Alternatively you can use 'map' method like this for shorter syntax:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const players = $("table [scope='row']").map((index, el) => $(el).text()).get();
console.log(players)
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论