时间戳

首页 > 解决方案 > 如何使用客户 JavaScript 在表格列表中创建

javascript - 如何使用客户 JavaScript 在表格列表中创建

问题描述

您好，我对 JavaScript 有很大的问题，我是初学者，我想创建包含人员和产品列表的简单列表。所以我创建了名称客户，产品列表，它是购物，但我想在表格中显示每个人可以买什么，以及他会花多少钱：

更新后我的代码：

<!DOCTYPE html>
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
 </head>
 <script>

var buyerList = [];
buyerList[0] = createBuyer('Jon', 20000)
buyerList[1] = createBuyer('Will', 25000)
buyerList[2] = createBuyer('Tom', 10000)

var productList = [];
productList[0] = createProduct('mp3', 3500)
productList[1] = createProduct('Meizu', 9000)
productList[2] = createProduct('Iphone', 25000)
productList[3] = createProduct('Philips', 16000)

var buyer;

for (var i = 0; i < buyerList.length; i++) {
  buyer = buyerList[i];
  buyer['basket'] = shoping(buyer['wallet'])
}

showResult(buyerList);

/***********LIBRARY**************/

function createBuyer(arg_name, arg_wallet, arg_gender = 'boy') {
  if (arg_wallet < 0)
    arg_wallet = 0
  return {
    name: arg_name,
    wallet: arg_wallet,
    gender: arg_gender
  }
}

function createProduct(arg_name, arg_price) {
  return {
    name: arg_name,
    price: arg_price
  }
}

function shoping(wallet) {
  var tovar;
  var basket = [];
  for (var i = 0; i < productList.length; i++) {
    tovar = productList[i];
    if (wallet > tovar['price']) {
      basket.push(tovar);
      wallet -= tovar['price']
    }
  }

  return basket;
}

function showResult(buyerslist) {
  var result = '<table align="center" width="400" bgcolor="#ffcc00">';
    for(buyer of buyerslist){
        var rowspan=Object.keys(buyer.basket).length+1;
        result+='<tr><td rowspan='+rowspan+'>'+buyer.name+'</td>';
        result+='<td rowspan='+rowspan+'>'+buyer.wallet+'</td>';
        result+='<td rowspan='+rowspan+'>'+buyer.gender+'</td></tr>';
        for(var item of buyer.basket){
          result+='<tr><td>'+item.name+'</td><td>'+item.price+'</td></tr>';
        }
    }
  result+='</table>';
  document.getElementById("details").innerHTML=result;
}
 </script>
 <body>
<div id="details">

 </body> 
</html>

正如你所看到的函数 showResult 它不正确，我真的很累找到解决方案。在 func showResult 我想获取包含客户列表的表格，他们可以购买哪种产品，以及他们将花费多少钱

标签： javascripthtml

解决方案

而不是编写每次调用时document.write都会覆盖页面内容的内容。您需要创建一个 HTML 元素，向其中附加一些内容，然后将其附加到文档中。

以下是您的操作方法：

  1. 使用以下方法创建一个 HTMLElement 类型的新对象.createElement：

    const element= document.createElement('div')

  2. 通过访问元素的属性，用 HTML 字符串填充.innerHTML元素：

    element.innerHTML = "<div>Some more html</div>"

  3. 完成表格填充后，将元素附加到现有的 DOM 元素

    document.querySelector('body').appendChild(element)

因此，考虑到这一点，我们可以在 HTML 表格中显示所有对象：

  1. 创建一个新的 HTML 标签元素div并将其保存在变量中table：

    const table = document.createElement('div');

  2. .reduce使用数组上的方法准备表的内容。

    const tableContent = list.reduce((string, e) => string + `
 <tr>
   <td>${e.name}</td>
   <td>${e.wallet}</td>
   <td>${e.gender}</td>
 </tr>
`, '');

  3. 将内容添加到表的innerHTML属性中：

     table.innerHTML = `
  <table align="center" width="800" bgcolor="#ffcc00">
    <tr><th>Name</th><th>Name</th><th>Gender</th></tr>
    ${tableContent}
  </table>
`;

  4. 将表格附加到body：

    document.querySelector('body').appendChild(table)

完整的代码如下所示：

var buyerList = [];
buyerList[0] = createBuyer('Jon', 20000)
buyerList[1] = createBuyer('Will', 25000)
buyerList[2] = createBuyer('Tom', 10000)

function createBuyer(arg_name, arg_wallet, arg_gender = 'boy') {
  return {
    name: arg_name,
    wallet: (arg_wallet < 0) ? 0 : arg_wallet,
    gender: arg_gender
  }
}

showResult(buyerList);

function showResult(list) {

  const table = document.createElement('div');
  const tableContent = list.reduce((string, e) => string + `
    <tr>
      <td>${e.name}</td>
      <td>${e.wallet}</td>
      <td>${e.gender}</td>
    </tr>
  `, '');
  
  table.innerHTML = `
    <table align="center" width="800" bgcolor="#ffcc00">
      <tr><th>Name</th><th>Name</th><th>Gender</th></tr>
      ${tableContent}
    </table>
  `;
  
  document.querySelector('body').appendChild(table)

}
td {
  text-align: center;
}

如果您不太了解，这里有一个使用循环.reduce的替代方法：.forEach

let HTMLString = '';
list.forEach(e => HTMLString + `
 <tr>
   <td>${e.name}</td>
   <td>${e.wallet}</td>
   <td>${e.gender}</td>
 </tr>
`);

推荐阅读