Duvidas sobre como colocar uma variavel Js no meio de um .InnerHTML

01/02/2019

0

JavaScript

Olé pessoal,

Estou tentando criar uma tabela em Javascript e quero saber se é possivel preencher o conteudo dela com uma variavel, pois assim eupreencho com qualquer informação que eu queira e não só uma blindada.

Minha variavel é a Teste, como mostrado abaixo, dentro dela tenho o corpo da tabela, mas quando eu coloco ela no meio da tabela, não funciona.

ja tentei :
'<tbody>', + Teste + '</tbody>', sem sucesso
'<tbody>', . Teste. '</tbody>', sem sucesso
e '<tbody>', . Teste. '</tbody>', sem sucesso

Exemplo:

<script>
var Teste = "'<tr>','<td>XXXX</td>', '<td>data</td>', '<td>data</td>', '<td>data</td>', '</tr>',";
var container = document.getElementById("container");
container.innerHTML = [
'<table class=\\'table table-striped table-hover dataTable js-exportable\\'>',
'<thead>',
'<tr>',
'<th style=\\'border-left: 10px solid #2264aa !important; background-color: #2264aa; color: white;\\'>GITEC</th>',
'<th style=\\'background-color: #2264aa; color: white;\\'>UF</th>',
'<th style=\\'background-color: #2264aa; color: white;\\'>Circuito</th>',
'<th style=\\'background-color: #2264aa; color: white;\\'>Operadora</th>',
'<th style=\\'background-color: #2264aa; color: white;\\'>Contrado</th>',
'<th style=\\'border-right: 10px solid #2264aa !important; background-color: #2264aa; color: white;\\'>Total Circuitos</th>',
'</tr>',
'</thead>',
'<tbody>',
****AQUI QUERO COLOCAR A VARIAVEL COM O CORPO DA TABELA***
'</tbody>',
'</table>'
].join("\\n");
</script>
</html>

alguempoderia me ajudar por favor
Robson

Robson

Responder

Post mais votado

01/02/2019

E ae Robson, blz cara,

Sim é possível mudar o HTML usando o DOM, tem um monte de forma de fazer isso, eu mesmo uso bastante isso em um projeto spring de um cliente da empresa que trabalho, mas uso jquery para isso facilitando minha vida XD, mas da para fazer isso na unha tbm, tenho um projeto PHP que faço isso na unha tbm, mas é mais sofrido.

Segue o exemplo que uso com java, ele é mais facil de entender , talvez que de um caminho de como montar a rotina:
function MINHA_FUNCAO() {
 
	 // Omiti boa parte da função para ficar mais facil de explicar como montar a tabela dinamicamente "Nesse caso só monto o conteudo , mas pode montar toda ela se quiser"

				var html = "";
				 		
				$('#tabePedido tr').remove();  // limpa o conteúdo que já estiver no alvo que nesse caso é o corpo da tabela 
				 
		  
				var color = ""
				for (var i = 0; i < response.result.length; i++) { 	// nesse caso tenho uma lista de dados do resultado de uma consulta , sendo que o objeto response tem os dados 

					var dataEmissao = "";
					var txtBotao = "";
					
					if(response.result[i].c5_EMISSAO!=null){ // carrego o campo de data de emissão
					dataEmissao = response.result[i].c5_EMISSAO.substr(6,2)+"/"+response.result[i].c5_EMISSAO.substr(4,2)+"/"+response.result[i].c5_EMISSAO.substr(0,4);
					}

					//conforme status do meu resultado mostro uma opção de botão ou outra dentro da lista
					if(response.result[i].status == "D"){
						txtBotao = "Editar";
					}else{
						txtBotao = "Visualizar";
					}
					
                                       // muda a cor da linha conforme status dos registros
					if(response.result[i].status == "I"){
						color = "#0174DF";
					}else if(response.result[i].status == "R"){
						color = "#8E3106";
					}else if(response.result[i].status == "A"){
						color = "#058603";
					}else if(response.result[i].status == "B"){
						color = "#FF0040";
					}else if(response.result[i].status == "D"){
						color = "#000000";
					}else if(response.result[i].status == "E"){
						color = "#F8EC02";	
					}else if(response.result[i].status == "T"){
						color = "#8E3106";	
					}
					
                                        // dados de de cada coluna
					html += "<tr id=\\"" + response.result[i].c5_NUM + "\\" style = color:"+color+"; >";
					html += "<td class=\\"larg-5\\">" + response.result[i].c5_NUM + "<\\/td>";
					html += "<td class=\\"larg-10\\">" + dataEmissao + "<\\/td>";
					html += "<td class=\\"larg-20\\">" + response.result[i].den_cliente + "<\\/td>";
					html += "<td class=\\"larg-5\\" align='center'>" + response.result[i].c5_TIPO+ "<\\/td>";					
					html += "<td class=\\"larg-5\\" align='center'>" + response.result[i].situacao + "<\\/td>";
					html += "<td class=\\"larg-10\\" align='center'>" + response.result[i].pesoPedido.toString().replace(".",",");+ "<\\/td>";
					
                                        // botão com opção de visualizar os dados que chamar uma função 
					html += "<td class=\\"larg-5\\" align='center'><button type=\\"button\\" class=\\"btn btn-default btn-sm\\" style = \\"width:70px\\" onclick='EditaPedido("+"\\""+ response.result[i].c5_FILIAL+"\\""+ ",\\""+ response.result[i].c5_NUM+"\\" )'>"+txtBotao+" <\\/button> <\\/td>";
					 
				 
				 
                                // injeta os dados no alvo que seria a tabela , esse append funciona da mesma forma que o innerHTML , escrevendo dentro do objeto html.
				$('#tabePedido').append(html);
			 

}
html

// essa é a parte do HTML, onde já deixo o cabeçalho da tabela fixo, mas pode criar tudo dinamicamente, nesse caso não houve necessidade.

<table class="table table-hover table-striped table-condensed">
			<thead>
				<tr>
					<th class="larg-5">Pedido</th>
					<th class="larg-5">Data</th>
					<th class="larg-20">Cliente</th>
					<th class="larg-5" style="text-align: center">Tipo</th>
					<th class="larg-5" style="text-align: center">Situação</th>
					<th class="larg-10" style="text-align: center">Peso Total</th>
					<th class="larg-10" colspan=3 style="text-align: center">Ação</th>
				</tr>
			</thead>
			<tbody id="tabePedido"> // ponto que receberá os dados
				<!-- Os dados são listados por javaScript pedidos.jsp metodo listaPedidos -->
			</tbody>
		</table>


A ideia é essa , você pode manipular qualquer objeto do HTML pelo JavaScript, espero que esse exemplo te ajude a monta a estrutura que deseja.

Boa Sorte!

Jucélio Silva

Jucélio Silva
Responder
Gostei + 1

Mais Posts

01/02/2019

Robson

E ae Robson, blz cara,<br />
<br />
Sim é possível mudar o HTML usando o DOM, tem um monte de forma de fazer isso, eu mesmo uso bastante isso em um projeto spring de um cliente da empresa que trabalho, mas uso jquery para isso facilitando minha vida XD, mas da para fazer isso na unha tbm, tenho um projeto PHP que faço isso na unha tbm, mas é mais sofrido.<br />
<br />
Segue o exemplo que uso com java, ele é mais facil de entender , talvez que de um caminho de como montar a rotina:<br />
<br />
function MINHA_FUNCAO() {<br />
 <br />
	 // Omiti boa parte da função para ficar mais facil de explicar como montar a tabela dinamicamente "Nesse caso só monto o conteudo , mas pode montar toda ela se quiser"<br />
<br />
				var html = "";<br />
				 		<br />
				$(''#tabePedido tr'').remove();  // limpa o conteúdo que já estiver no alvo que nesse caso é o corpo da tabela <br />
				 <br />
		  <br />
				var color = ""<br />
				for (var i = 0; i < response.result.length; i++) { 	// nesse caso tenho uma lista de dados do resultado de uma consulta , sendo que o objeto response tem os dados <br />
<br />
					var dataEmissao = "";<br />
					var txtBotao = "";<br />
					<br />
					if(response.result[i].c5_EMISSAO!=null){ // carrego o campo de data de emissão<br />
					dataEmissao = response.result[i].c5_EMISSAO.substr(6,2)+"/"+response.result[i].c5_EMISSAO.substr(4,2)+"/"+response.result[i].c5_EMISSAO.substr(0,4);<br />
					}<br />
<br />
					//conforme status do meu resultado mostro uma opção de botão ou outra dentro da lista<br />
					if(response.result[i].status == "D"){<br />
						txtBotao = "Editar";<br />
					}else{<br />
						txtBotao = "Visualizar";<br />
					}<br />
					<br />
                                       // muda a cor da linha conforme status dos registros<br />
					if(response.result[i].status == "I"){<br />
						color = "#0174DF";<br />
					}else if(response.result[i].status == "R"){<br />
						color = "#8E3106";<br />
					}else if(response.result[i].status == "A"){<br />
						color = "#058603";<br />
					}else if(response.result[i].status == "B"){<br />
						color = "#FF0040";<br />
					}else if(response.result[i].status == "D"){<br />
						color = "#000000";<br />
					}else if(response.result[i].status == "E"){<br />
						color = "#F8EC02";	<br />
					}else if(response.result[i].status == "T"){<br />
						color = "#8E3106";	<br />
					}<br />
					<br />
                                        // dados de de cada coluna<br />
					html += "<tr id=\\\\\\\\"" + response.result[i].c5_NUM + "\\\\\\\\" style = color:"+color+"; >";<br />
					html += "<td class=\\\\\\\\"larg-5\\\\\\\\">" + response.result[i].c5_NUM + "<\\\\\\\\/td>";<br />
					html += "<td class=\\\\\\\\"larg-10\\\\\\\\">" + dataEmissao + "<\\\\\\\\/td>";<br />
					html += "<td class=\\\\\\\\"larg-20\\\\\\\\">" + response.result[i].den_cliente + "<\\\\\\\\/td>";<br />
					html += "<td class=\\\\\\\\"larg-5\\\\\\\\" align=''center''>" + response.result[i].c5_TIPO+ "<\\\\\\\\/td>";					<br />
					html += "<td class=\\\\\\\\"larg-5\\\\\\\\" align=''center''>" + response.result[i].situacao + "<\\\\\\\\/td>";<br />
					html += "<td class=\\\\\\\\"larg-10\\\\\\\\" align=''center''>" + response.result[i].pesoPedido.toString().replace(".",",");+ "<\\\\\\\\/td>";<br />
					<br />
                                        // botão com opção de visualizar os dados que chamar uma função <br />
					html += "<td class=\\\\\\\\"larg-5\\\\\\\\" align=''center''><button type=\\\\\\\\"button\\\\\\\\" class=\\\\\\\\"btn btn-default btn-sm\\\\\\\\" style = \\\\\\\\"width:70px\\\\\\\\" onclick=''EditaPedido("+"\\\\\\\\""+ response.result[i].c5_FILIAL+"\\\\\\\\""+ ",\\\\\\\\""+ response.result[i].c5_NUM+"\\\\\\\\" )''>"+txtBotao+" <\\\\\\\\/button> <\\\\\\\\/td>";<br />
					 <br />
				 <br />
				 <br />
                                // injeta os dados no alvo que seria a tabela , esse append funciona da mesma forma que o innerHTML , escrevendo dentro do objeto html.<br />
				$(''#tabePedido'').append(html);<br />
			 <br />
<br />
}<br />
<br />
<br />
html<br />
<br />
// essa é a parte do HTML, onde já deixo o cabeçalho da tabela fixo, mas pode criar tudo dinamicamente, nesse caso não houve necessidade.<br />
<br />
<table class="table table-hover table-striped table-condensed"><br />
			<thead><br />
				<tr><br />
					<th class="larg-5">Pedido</th><br />
					<th class="larg-5">Data</th><br />
					<th class="larg-20">Cliente</th><br />
					<th class="larg-5" style="text-align: center">Tipo</th><br />
					<th class="larg-5" style="text-align: center">Situação</th><br />
					<th class="larg-10" style="text-align: center">Peso Total</th><br />
					<th class="larg-10" colspan=3 style="text-align: center">Ação</th><br />
				</tr><br />
			</thead><br />
			<tbody id="tabePedido"> // ponto que receberá os dados<br />
				<!-- Os dados são listados por javaScript pedidos.jsp metodo listaPedidos --><br />
			</tbody><br />
		</table><br />
	<br />
<br />
<br />
A ideia é essa , você pode manipular qualquer objeto do HTML pelo JavaScript, espero que esse exemplo te ajude a monta a estrutura que deseja.<br />
<br />
Boa Sorte!
<br />
<br />
<br />
<br />


Gostei desse jeito , vou tentar fazer e desenrolar desse jeito que você passou, ja que da outra forma esta meio complicado rs<br />
obrigado
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar