Question

你好我有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中，我希望获得客户列表，他们可以购买哪种产品以及他们将花多少钱

Answer 1

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

以下是如何做到的：

使用方法.createElement创建一个HTMLElement类型的新对象：
```
const element= document.createElement('div')
```
通过访问元素的属性.innerHTML，使用HTML字符串填充元素：
```
element.innerHTML = "<div>Some more html</div>"
```

填写表格后，将元素附加到现有DOM元素

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

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

创建标记div的新HTML元素并将其保存在变量table中：
```
const table = document.createElement('div');
```

使用阵列上的.reduce方法准备表的内容。

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

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

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

将表格附加到body：

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

完整代码如下：

＆＃13;

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)

}

＆＃13;

td {
  text-align: center;
}

＆＃13;

如果你不熟悉.reduce，可以使用.forEach循环来替代{<3}}：

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

Answer 2

这应该有效。正如@Ivan指出的那样，避免使用document.write。

＆＃13;

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;
}

＆＃13;

<div id="details">

＆＃13;

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

2 个答案: