HTML表到數組javascript

Question

我之前發現了這個問題，這是答案，但我無法使它起作用。 所以問題是：我想使用 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

Answer 1

根據您發布的 - 不工作 - 代碼進行猜測，我建議使用 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);

JS小提琴演示。

或者，在純 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);

參考：

• JavaScript：
  • Array.prototype.map() 。
  • Function.prototype.call() 。
  • HTMLTableRowElement 。
  • Node.textContent 。
• jQuery：
  • get() 。
  • map() 。

Answer 2

您還可以獲取表格的標題並從中創建“對象模板”。 所以你有這樣的事情：

{ 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>

Answer 3

此時最短的方法是：

var tableArray = [...document.querySelectorAll('table#cartGrid>*>tr')]
  .map(row => [...row.querySelectorAll('td,th')].map(cell => cell.innerText) );

其中 [...x] 是 x 到數組的隱式轉換。 最后一張地圖當然是可選的。