Question

我的下表包含一个产品。但是，我只想将每行的前4个单元格作为数组插入。因此数组将是[1, Adidas, 2 , $100, 2, Nike, 1 , $50]

Product ID | Product Name | Qty | Price |
     1     |    Adidas    |  2  | $100  | Delete btn
     2     |    Nike      |  1  | $50   | Delete btn

我尝试了这个jquery代码，然而，它将每行的所有td插入到数组中，这不是我想要的。

如何将这组代码修改为仅插入前4并排除最后一个单元格？谢谢。

$("#checkoutList > tbody > tr").each(function () {
                               var arrayOfThisRow = [];
                               var tableData = $(this).find('td');
                               if (tableData.length > 0) {
                                   tableData.each(function () { arrayOfThisRow.push($(this).text()); });
                                   myTableArray.push(arrayOfThisRow);
                               }
                           });

Answer 1

使用jQuery each()和map()方法来生成数组。要排除最后一列，请使用:not()和:last-child伪类选择器的组合。

// array for result
var res = [];
// iterate over the tr
$("table > tbody > tr").each(function() {
  // push the content array to `res`
  res.push(
     // get all td except last and generate content array
     $('td:not(:last-child)', this).map(function() {
        // get content and trim
        return $(this).text().trim();
        // get the result as an array
     }).get()
  );
});

var res = [];

$("table > tbody > tr").each(function() {
  res.push($('td:not(:last-child)', this).map(function() {
    return $(this).text().trim();
  }).get());
});

console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>
        Product ID</td>
      <td>Product Name</td>
      <td>Qty</td>
      <td>Price</td>
      <td>Price</td>
  </thead>
  <tbody>
    <tr>
      <td>
        1</td>
      <td>Adidas</td>
      <td>2</td>
      <td>$100</td>
      <td>Delete btn</td>
    </tr>
    <tr>
      <td>
        2</td>
      <td>Nike</td>
      <td>1</td>
      <td>$50</td>
      <td>Delete btn</td>
    </tr>
  </tbody>
</table>

Answer 2

试试这个：

tableData.slice(0, 4);

您将存储在tableData中，只存储前4个单元格...

Array.slice()

Answer 3

使用纯JS完成这些工作非常简单。让我们首先创建我们的测试表，然后从测试表中获取所需的数组。

＆＃13;

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

var tableData = [{"Product ID": 1, "Product Name": "Adidas", Qty: 2, Price: 100, Delete: "<button>Delete</button>"},
                 {"Product ID": 2, "Product Name": "Nike", Qty: 1, Price: 50, Delete: "<button>Delete</button>"},
                 {"Product ID": 3, "Product Name": "Puma", Qty: 4, Price: 79, Delete: "<button>Delete</button>"},],
  ptContainer = document.getElementById("ptContainer"),
  productTable,
  productArray = [];
ptContainer.innerHTML = tableMaker(tableData,true);
productTable = document.getElementsByTagName("table")[0];
for (var i=1; i<productTable.rows.length; i++){
  productArray.push(productTable.rows[i].cells[0].textContent,
                    productTable.rows[i].cells[1].textContent,
                    productTable.rows[i].cells[2].textContent);
}
console.log(productArray);

＆＃13;

<div id="ptContainer"></div>

＆＃13;

或者您甚至可以简化最后一部分，例如;

for (var i=1; i<productTable.rows.length; i++){
  productArray.push(...[...productTable.rows[i].cells].slice(0,3).map(c => c.textContent));
}

特定表格单元格成阵列

3 个答案: