如何使用客户JavaScript创建表内列表_Javascript_Html

如何使用客户JavaScript创建表内列表

javascript html

如何使用客户JavaScript创建表内列表,javascript,html,Javascript,Html,您好，我有一个JavaScript的大问题，我是初学者，我想创建一个简单的列表与人和产品列表。因此，我创建了客户名称、产品列表，这就是购物，但我想在表中显示每个人可以买什么，以及他将花多少钱：更新后的我的代码： <!DOCTYPE html> <html> <head> <title>!DOCTYPE</title> <meta charset="utf-8"> </head> <scr

您好，我有一个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>


!DOCTYPE
var buyerList=[]；
买方列表[0]=createBuyer（'Jon'，20000）
买方列表[1]=createBuyer（'Will'，25000）
买方列表[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买方；
对于（变量i=0；itovar['price']）{
篮下推（tovar）；
钱包-=tovar[“价格”]
}
}
回程篮；
}
函数showResult（买方列表）{
var结果=“”；
适用于（买方名单的买方）{
var rowspan=Object.keys（buyer.basket）.length+1；
结果+=''+买方名称+''；
结果+=''+买家.钱包+''；
结果+=''+买家。性别+''；
用于（买方篮子的var项目）{
结果+=''+项目.名称+''+项目.价格+''；
}
}
结果+=''；
document.getElementById（“详细信息”）.innerHTML=结果；
}

正如您所看到的函数showResult，它是不正确的，我真的很想找到解决方案。

在func showResult中，我想得到一个表，其中列出了客户列表，以及他们可以购买的产品，以及他们将花费多少钱，而不是编写每次调用时都会覆盖页面内容的内容。您需要创建一个HTML元素，向其附加一些内容，然后将其附加到文档中

以下是您如何做到这一点：

使用以下方法创建HtmleElement类型的新对象：

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

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

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

创建tag

div

的新HTML元素，并将其保存在变量

表中

：

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>
`, '');

将表格附加到

正文中

：

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

完整代码如下所示：

var buyerList=[]；
买方列表[0]=createBuyer（'Jon'，20000）
买方列表[1]=createBuyer（'Will'，25000）
买方列表[2]=createBuyer（'Tom'，10000）
函数createBuyer（arg_名称、arg_钱包、arg_性别='boy'）{
返回{
名称：arg_name，
钱包：（arg_钱包<0）？0:arg_钱包，
性别：arg_性别
}
}
展示结果（买家列表）；
函数showResult（列表）{
const table=document.createElement（'div'）；
const tableContent=list.reduce（（string，e）=>string+`
${e.name}
${e.wallet}
${e.gender}
`, '');
table.innerHTML=`
姓名性别
${tableContent}
`;
document.querySelector（'body'）.appendChild（表）
}

td{
文本对齐：居中；
}

这应该行得通。正如@Ivan所指出的，避免使用

文档

var buyerList=[]；
买方列表[0]=createBuyer（'Jon'，20000）
买方列表[1]=createBuyer（'Will'，25000）
买方列表[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买方；
对于（变量i=0；itovar['price']）{
篮下推（tovar）；
钱包-=tovar[“价格”]
}
}
回程篮；
}
函数showResult（买方列表）{
var结果=“”；
适用于（买方名单的买方）{
var rowspan=Object.keys（buyer.basket）.length+1；
结果+=''+买方名称+''；
结果+=''+买家.钱包+''；
结果+=''+买家。性别+''；
用于（买方篮子的var项目）{
结果+=''+项目.名称+''+项目.价格+''；
}
}
结果+=''；
document.getElementById（“详细信息”）.innerHTML=结果；
}
您希望得到什么样的结果？在func showResult中，我想得到一张表，其中列出了客户列表，以及他们可以购买的产品，以及他们将花费多少钱。语法错误：此行有意外标记td{text align:center；}谢谢，但是我想展示一下人们可以从产品列表中购买什么，我已经向你展示了如何做到这一点。现在是你试着让它发挥作用的时候了。编码不是复制/粘贴。。。。。。你应该避免在呈现元素上使用innerHTML+=，我需要把@qunzi添加到你想要显示表格的html中。我用我的完整代码更新了这个问题，我做到了
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)