javascript - 遍历html数组在javascript中不起作用

Question

我尝试遍历这个但不能。函数 orderpackage (){ 下的函数

var product_line = $('#carttable')[0].getElementsByTagName('tr');

for (var i = 1; i < product_line.length; i++) {
}

console.log(product_line)

在控制台输出中产生这个

每个 tr.table_row 都是由这个制成的

<tr class="table_row">
  <td class="column-1">
    <div class="how-itemcart1">
      <img src=${Items.imageurl} alt="IMG">
    </div>
  </td>
  <td class="column-2">${Items.name}</td>
  <td class="column-3">$ ${Items.price}</td>
  <td class="column-4">
    <div class="wrap-num-product flex-w m-l-auto m-r-0">
      <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m qty-change" id="qty-change">
        <i class="fs-16 zmdi zmdi-minus"></i>
      </div>

      <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product1" value=${Items.user_quantity}>

      <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m qty-change" id="qty-change">
        <i class="fs-16 zmdi zmdi-plus"></i>
      </div>
    </div>
  </td>
  <td class="column-5">${line_total_sum}</td>
</tr>

我想要做的是遍历每个并获得价格、数量和总行数。当我尝试下面的函数时，总行显示错误

var product_line = $('#carttable')[0].getElementsByTagName('tr')[4];

如何遍历每个 tr 到价格、数量和总行数？

标签： javascripthtml

Answer 1

使用纯 JS，您可以使用HTMLTableElement.rows来获取表格上的所有行。

然后你需要遍历它们，可能会跳过第一个（标题）。对于每一个，访问包含您需要的字段的子（单元格）并使用它们创建一个新数组[price, quantity, total]，然后将其推送到另一个包含所有表数据的数组。

这是使用Array.from()and的一种方法Array.prototype.map()：

const tableData = Array.from(document.getElementById('table').rows).slice(1).map(row => {
  const cells = row.children;
  
  return [cells[0].innerText, cells[1].innerText, cells[2].innerText];
});

console.log(JSON.stringify(tableData));

table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}

<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>

如果您更喜欢使用for...of循环：

let tableData = [];

// Iterate over every row:
for (const row of document.getElementById('table').rows) {
  // Get the cells in the current row:
  const cells = row.children;
  
  // Read the text on the columns we want:
  tableData.push([cells[0].innerText, cells[1].innerText, cells[2].innerText]);
}

// Remove the first row (header):
tableData = tableData.slice(1);

console.log(JSON.stringify(tableData));

table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}

<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>

或者只是一个普通的for循环：

const rows = document.getElementById('table').rows;
const totalRows = rows.length;
const tableData = [];

// Iterate over every row, skipping the first one (header) already:
for (let i = 1; i < totalRows; ++i) {
  // Get the cells in the current row:
  const cells = rows[i].children;
  
  // Read the text on the columns we want:
  tableData.push([cells[0].innerText, cells[1].innerText, cells[2].innerText]);
}

console.log(JSON.stringify(tableData));

table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}

<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>