如何使用 Jquery 获取 td 值并存储在数组中？ [复制]
Posted
技术标签:
【中文标题】如何使用 Jquery 获取 td 值并存储在数组中？ [复制]【英文标题】：How to get td values and store in array using Jquery? [duplicate] 【发布时间】：2019-10-26 09:50:18 【问题描述】：我正在寻找一种方法来获取（第一个、第二个、第三个等）td 值，并将它们存储在数组中。
使用each 迭代一个td：
$("table tbody tr td").each(function(i,e)
console.log($(this).html());
);
使用此代码，我需要获取所有列值，例如：
George
Princeton
Alabama
Pizza
如何使用各自的键将这些值存储在数组中：Name, College, State, Food。我在想：
var array = [];
$("table tbody tr td").each(function(i,e)
array['Name'] = $(this) ?? //I dont know how get the first td.
);
我不知道这是否是迭代表的最佳方式，但我认为我在如何获取第一个、第二个、第三个 td 值方面遗漏了一些东西。
表格：（这只是一个例子，值是动态创建的）
<table >
<tbody>
<tr>
<td> George </td>
<td> Princeton </td>
<td> Alabama </td>
<td> Pizza </td>
</tr>
<tr>
<td> Charli</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Milk Shake </td>
</tr>
<tr>
<td> Max</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Rice </td>
</tr>
<tr>
<td> Peter</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Fast Food </td>
</tr>
</tbody>
</table>
【问题讨论】：
请同时发布表格html 这不是数组的用途。使用一个对象。 要获取td 的文本，请使用text()。
好吧，公平地说，你的问题的标题是“如何使用 Jquery 在数组中存储值？”第一句话是“我正在寻找一种将 td 值存储在 key => value 的数组中的方法。”也许您可以edit您的标题和问题，让您更清楚您遇到的问题是什么？
另外，适当的副本是Create an array of objects by iterating through table rows
【参考方案1】：
const arrayFromJQuery = $("table tbody tr").map(function(i, row)
const data = $('td', row);
return
Name: data.eq(0).text().trim(),
College: data.eq(1).text().trim(),
State: data.eq(2).text().trim(),
Food: data.eq(3).text().trim()
).get();
console.log(arrayFromJQuery);
// or without jquery, just modern JS
const array = [...document.querySelectorAll("table tbody tr")].map((row) =>
const [Name, College, State, Food] = [...row.querySelectorAll('td')].map(td => td.textContent.trim());
return
Name,
College,
State,
Food
)
console.log(array);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> George </td>
<td> Princeton </td>
<td> Alabama </td>
<td> Pizza </td>
</tr>
<tr>
<td> Charli</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Milk Shake </td>
</tr>
<tr>
<td> Max</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Rice </td>
</tr>
<tr>
<td> Peter</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Fast Food </td>
</tr>
</tbody>
</table>【讨论】：
【参考方案2】：试试这个：
$(function()
var keys = [];
var myData = ;
$("table thead th").each(function()
var k = $(this).text().trim().toLowerCase();
keys.push(k);
myData[k] = [];
);
$("table tbody tr").each(function(i, el)
$.each(keys, function(k, v)
myData[v].push($("td:eq(" + k + ")", el).text().trim());
);
);
console.log(myData);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>College</th>
<th>State</th>
<th>Food</th>
</tr>
</thead>
<tbody>
<tr>
<td> George </td>
<td> Princeton </td>
<td> Alabama </td>
<td> Pizza </td>
</tr>
<tr>
<td> Charli</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Milk Shake </td>
</tr>
<tr>
<td> Max</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Rice </td>
</tr>
<tr>
<td> Peter</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Fast Food </td>
</tr>
</tbody>
</table>结果：
"name": [
"George",
"Charli",
"Max",
"Peter"
],
"college": [
"Princeton",
"Princeton",
"Princeton",
"Princeton"
],
"state": [
"Alabama",
"Alabama",
"Alabama",
"Alabama"
],
"food": [
"Pizza",
"Milk Shake",
"Rice",
"Fast Food"
]
如果你需要一个对象数组，你可以这样做：
$(function()
var keys = [];
var myData = [];
$("table thead th").each(function()
var k = $(this).text().trim().toLowerCase();
keys.push(k);
);
$("table tbody tr").each(function(i, el)
var row =
$.each(keys, function(k, v)
row[v] = $("td:eq(" + k + ")", el).text().trim();
);
myData.push(row);
);
console.log(myData);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>College</th>
<th>State</th>
<th>Food</th>
</tr>
</thead>
<tbody>
<tr>
<td> George </td>
<td> Princeton </td>
<td> Alabama </td>
<td> Pizza </td>
</tr>
<tr>
<td> Charli</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Milk Shake </td>
</tr>
<tr>
<td> Max</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Rice </td>
</tr>
<tr>
<td> Peter</td>
<td> Princeton </td>
<td> Alabama </td>
<td> Fast Food </td>
</tr>
</tbody>
</table>结果：
[
"name": "George",
"college": "Princeton",
"state": "Alabama",
"food": "Pizza"
,
"name": "Charli",
"college": "Princeton",
"state": "Alabama",
"food": "Milk Shake"
,
"name": "Max",
"college": "Princeton",
"state": "Alabama",
"food": "Rice"
,
"name": "Peter",
"college": "Princeton",
"state": "Alabama",
"food": "Fast Food"
]
希望对您有所帮助。
【讨论】：
嗨 Twisty，如果我的文本之间有空格，例如<th>Student Name</th> 我如何在 myData 中删除它？
@***SavedMyLife 你可以使用.replace()
试过但失败了，你能帮忙吗？
@***SavedMyLife var k = $(this).text().trim().toLowerCase().replace(" ", ""); 应该这样做。
但这只会删除字符串的第一个空格，如果字符串是"U know Nothing"【参考方案3】：
阅读this 我必须找到解决方案。
$("#test").click(function()
var thvalues = $('table thead th').map(function()
return $(this).text();
);
var rows = $('table tbody tr').map(function()
var result = ;
var values = $(this).find('td').map(function()
return $(this).text();
);
for(var i=0;i<thvalues.length;i++)
result[thvalues[i]] = values[i];
return result
).toArray();
console.log(thvalues);
console.log(rows );
); // endAdd
结果
(2) […, …]
0:
Name: " George "
State: " Alabama "
College: " Princeton "
Food: " Pizza "
__proto__: Object
1:
Name: " Peter "
State: " Alabama "
College: " Princeton "
Food: " Fast Food "
__proto__: Object
length: 2
__proto__: Array(0)
【讨论】：
以上是关于如何使用 Jquery 获取 td 值并存储在数组中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章