[英]HTML table to array javascript
我之前发现了这个问题,这是答案,但我无法使它起作用。 所以问题是:我想使用 javascript 将表中的所有值都放入数组中
HTML表格:
<table id="cartGrid">
<thead>
<tr>
<th>Item Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Ext Price</th>
</tr>
</thead>
<tbody>
<tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td>
<tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td>
</tbody>
</table>
JavaScript:
var myTableArray = [];
$("table#cartGrid tr").each(function() {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function() { arrayOfThisRow.push($(this).text()); });
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
我找到了另一种选择 - 但都返回一个空数组
var tableData = new Array();
$('#cartGrid tr').each(function(row, tr){
tableData[row]={
"ItemDescription" : $(tr).find('td:eq(0)').text()
, "Qty" :$(tr).find('td:eq(1)').text()
, "UnitPrice" : $(tr).find('td:eq(2)').text()
, "ExtPrice" : $(tr).find('td:eq(3)').text()
}
});
tableData.shift(); // first row is the table header - so remove
根据您发布的 - 不工作 - 代码进行猜测,我建议使用 jQuery 进行以下操作:
// iterate over each of the <tr> elements within the
// <tbody>, using the map() method:
var details = $('tbody tr').map(function (i, row) {
// creating an Object to return:
return {
// returning the key:value pair of
// the hard-coded key-names against the
// retrieved textContent (using the
// HTMLTableRowElement's cells collection:
'description': row.cells[0].textContent,
'quantity': row.cells[1].textContent,
'unitPrice': row.cells[2].textContent,
'extPrice': row.cells[3].textContent
}
// converting the map into an Array:
}).get();
console.log(details);
或者,在纯 JavaScript 中:
// using Array.prototype.map(), with Function.prototype.call(), to treat
// the Array-like NodeList returned by document.querySelectorAll(), as an
// Array; iterating over the found <tr> elements within the <tbody>:
var details = Array.prototype.map.call(document.querySelectorAll('tbody tr'), function (row) {
// the first argument of the anonymous function (here: 'row') is
// the array-element of the array over which we're iterating.
// here we return exactly the same as before:
return {
'description': row.cells[0].textContent,
'quantity': row.cells[1].textContent,
'unitPrice': row.cells[2].textContent,
'extPrice': row.cells[3].textContent
};
});
console.log(details);
参考:
您还可以获取表格的标题并从中创建“对象模板”。 所以你有这样的事情:
{ Item_Description: '', Qty: '', Unit_Price: '', Exit_Price: '' }
为了稍后映射行数据,您可以将每个键存储在一个数组中,以便您可以轻松地为每一行访问它。
请查看下面和jsFiddle的演示。
但是为什么需要从 DOM 中获取数据呢? 我认为通过ajax请求从后端获取数据作为JSON会更好。
var tableData = [], objTmpl, objMap = []; $("table#cartGrid tr").each(function() { var $row = $(this), key = ''; //console.log($row.children().filter('th')); //check if heading var $headings = !objTmpl ? $row.children().filter('th'): []; // do this test only if objTmpl is undefined! //console.log($headings); if ( $headings.length > 0 ) { objTmpl = {}; $headings.each(function(index) { key = $(this).text().replace(' ', '_'); objTmpl[key] = ''; objMap[index] = key; }); //console.log('heading found', objTmpl, objMap); } else { // not heading --> data row var curRowDataObj = JSON.parse(JSON.stringify(objTmpl)); // copy tmpl. $row.children().each(function(index) { curRowDataObj[objMap[index]] = $(this).text(); }); tableData.push(curRowDataObj); } }); //console.log(tableData); $('#out').html(JSON.stringify(tableData, null, 4));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="cartGrid"> <thead> <tr> <th>Item Description</th> <th>Qty</th> <th>Unit Price</th> <th>Ext Price</th> </tr> </thead> <tbody> <tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td></tr> <tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td></tr> </tbody> </table> <h2>Output data (debugging only):</h2> <pre id="out"></pre>
此时最短的方法是:
var tableArray = [...document.querySelectorAll('table#cartGrid>*>tr')]
.map(row => [...row.querySelectorAll('td,th')].map(cell => cell.innerText) );
其中 [...x] 是 x 到数组的隐式转换。 最后一张地图当然是可选的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.