Question

你好，你们可以指出我的错吗？我只是想显示我的td和tr因此我创建了一个名为 variavel 的变量，但它不会在我的html中返回任何内容。

＆＃13;

var lista = [

{ "descricao":"arroz","qtd":"1" , "valor":"5.40"   }, 
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99"   },
{ "descricao":"carne","qtd":"1" , "valor":"15.00"   }

];


function listas (lista) 
{
	total = 0;

	for (var key in lista)

	{
      total+= lista[key].valor * lista[key].qtd;
			
	}
	return total;
}


function criatabela(lista) 
{  
	// var tabelabody = document.createElement('table');
	// tabelabody.id="tabelalista";
	var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';

	for (var key in lista)
	{
		tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td>  </td></tr>';
		alert(lista[key].descricao);
		alert(lista[key].qtd);
		alert(lista[key].valor);
	}

	tabela +='</tbody>';
	
	document.getElementById('tabelalista') = tabela;



}
listas(lista);
criatabela(lista);

＆＃13;

<!DOCTYPE html>
<html>

<head>
	<title>  Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="css/estilo.css"> 

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" id="navTitulo" href="index.html" >    </a>

    </div>
  </div>
</nav>


<div class="container-fluid">	
 
<table id="tabelalista" class="table">  

</table>

</div>

</body>
</html>

＆＃13;

是我用错误方式写的js？请帮我！

Answer 1

您必须将表的innerHTML设置为等于tabela变量。

document.getElementById('tabelalista').innerHTML = tabela;

Answer 2

请在此行中使用innerHTML：

document.getElementById('tabelalista').innerHTML = tabela;

var lista = [

{ "descricao":"arroz","qtd":"1" , "valor":"5.40"   }, 
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99"   },
{ "descricao":"carne","qtd":"1" , "valor":"15.00"   }

];


function listas (lista) 
{
	total = 0;

	for (var key in lista)

	{
      total+= lista[key].valor * lista[key].qtd;
			
	}
	return total;
}


function criatabela(lista) 
{  
	// var tabelabody = document.createElement('table');
	// tabelabody.id="tabelalista";
	var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';

	for (var key in lista)
	{
		tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td>  </td></tr>';
	}

	tabela +='</tbody>';
	
	document.getElementById('tabelalista').innerHTML = tabela;



}
listas(lista);
criatabela(lista);

<!DOCTYPE html>
<html>

<head>
	<title>  Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="css/estilo.css"> 

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" id="navTitulo" href="index.html" >    </a>

    </div>
  </div>
</nav>


<div class="container-fluid">	
 
<table id="tabelalista" class="table">  

</table>

</div>

</body>
</html>

Answer 3

如果您在开发者控制台中看到，则会发现引用错误。那是因为你不能像这样分配html。您需要使用.innerHTML或.append（）（如果使用jquery）

var lista = [

{ "descricao":"arroz","qtd":"1" , "valor":"5.40"   }, 
{ "descricao":"cerveja","qtd":"12" , "valor":"1.99"   },
{ "descricao":"carne","qtd":"1" , "valor":"15.00"   }

];


function listas (lista) 
{
	total = 0;

	for (var key in lista)

	{
      total+= lista[key].valor * lista[key].qtd;
			
	}
	return total;
}


function criatabela(lista) 
{  
	// var tabelabody = document.createElement('table');
	// tabelabody.id="tabelalista";
	var tabela = '<thead><tr><td>DESCRICAO</td><td>QUANTIDADE</td><td>VALOR</td><td>EDITAR | ACAO </td></tr></thead><tbody>';

	for (var key in lista)
	{
		tabela +='<tr> <td> '+lista[key].descricao+' </td> <td> '+lista[key].qtd+' </td><td> '+lista[key].valor+' </td><td>  </td></tr>';
		
    }

	tabela +='</tbody>';
	document.getElementById('tabelalista').innerHTML = (tabela); //Note this. 



}
console.log(document.getElementById('tabelalista'))
listas(lista);
criatabela(lista);

<!DOCTYPE html>
<html>

<head>
	<title>  Shopping Control </title>
</head>
<script type="text/javascript" src="js/config.js" > </script>
<script type="text/javascript" src="js/main.js" > </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="css/estilo.css"> 

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" id="navTitulo" href="index.html" >    </a>

    </div>
  </div>
</nav>


<div class="container-fluid">	
 
<table id="tabelalista" class="table">  

</table>

</div>

</body>
</html>

JS - 我的表没有出现任何内容。我想在TD之后展示TR。为什么我不能这样做？

3 个答案: