gerador de tabelas html com php

[altwes]

o objetivo dessa tabela é simples, quando coloco as informações na textarea a mesma deve aparecer e quando não preencho as celulas dessa tabela tambem não devem aparecer, bom até ai esta tudo ocorrendo certo, porém essa tabela tem q ser zebrada e quando eu deixo de colocar uma das informações as cores se repetem e não ficam zebradas (isso ocorre porque nem sempre vou colocar todas as informações da text area).

<?php

if(isset($_POST)){
	$t1a = $_POST['txt1a'];
	$t1b = str_replace("\r\n",'<br />',$_POST['txt1b']);
	$t2a = $_POST['txt2a'];
	$t2b = str_replace("\r\n",'<br />',$_POST['txt2b']);
	$t3a = $_POST['txt3a'];
	$t3b = str_replace("\r\n",'<br />',$_POST['txt3b']);
	$t4a = $_POST['txt4a'];
	$t4b = str_replace("\r\n",'<br />',$_POST['txt4b']);
	$t5a = $_POST['txt5a'];
	$t5b = str_replace("\r\n",'<br />',$_POST['txt5b']);
	$t6a = $_POST['txt6a'];
	$t6b = str_replace("\r\n",'<br />',$_POST['txt6b']);
	$t7a = $_POST['txt7a'];
	$t7b = str_replace("\r\n",'<br />',$_POST['txt7b']);
	$t8a = $_POST['txt8a'];
	$t8b = str_replace("\r\n",'<br />',$_POST['txt8b']);
	$t9a = $_POST['txt9a'];
	$t9b = str_replace("\r\n",'<br />',$_POST['txt9b']);
	$t10a = $_POST['txt10a'];
	$t10b = str_replace("\r\n",'<br />',$_POST['txt10b']);
	$t11a = $_POST['txt11a'];
	$t11b = str_replace("\r\n",'<br />',$_POST['txt11b']);
	$t12a = $_POST['txt12a'];
	$t12b = str_replace("\r\n",'<br />',$_POST['txt12b']);
	$t13a = $_POST['txt13a'];
	$t13b = str_replace("\r\n",'<br />',$_POST['txt13b']);
	$t14a = $_POST['txt14a'];
	$t14b = str_replace("\r\n",'<br />',$_POST['txt14b']);
	$t15a = $_POST['txt15a'];
	$t15b = str_replace("\r\n",'<br />',$_POST['txt15b']);
	
	if(empty($t1a)){
		echo '<script>alert(" \n\Oops,\nO título do artigo é essencial!\n\nPreencha-o e tente novamente. ");</script>';
		exit;
	}
	
	$tab = '<!-- Título -->\n';	
	$tab .= '<div style=\"font-size:16pt; font-weight:bold; padding:10px; font-family: Roboto;\">'.$t1a.'</div>\n';
	
	if(!empty($t1a) && !empty($t1b)){ 
		$tab .= '<!-- Descrição -->\n';
		$tab .= '<div style=\"font-size:12pt; padding:10px; font-family: Roboto;\">'.$t1b.'</div>\n\n';
	}
	$tab .= '<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"font-family:Roboto, sans-serif;\">\n';
	$tab .= '<tbody>\n\n';					
	
	if(!empty($t2a) && !empty($t2b)) {
		$tab .= '<!-- Linha 1 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; padding:5px; font-size:10pt; font-weight:800;\">'.$t2a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; padding:5px; font-size:10pt;\">'.$t2b.'</td>\n';
		$tab .= '</tr>\n\n';
	}

	if(!empty($t3a) && !empty($t3b)){
		$tab .= '<!-- Linha 2 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t3a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t3b.'</td>\n';
		$tab .= '</tr>\n\n';
	}

    if(!empty($t4a) && !empty($t4b)){
		$tab .= '<!-- Linha 3 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t4a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t4b.'</td>\n';
		$tab .= '</tr>\n\n';
	}

	if(!empty($t5a) && !empty($t5b)){ 
		$tab .= '<!-- Linha 4 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t5a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t5b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t6a) && !empty($t6b)){ 
		$tab .= '<!-- Linha 5 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t6a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t6b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t7a) && !empty($t7b)){ 
		$tab .= '<!-- Linha 6 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t7a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t7b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t8a) && !empty($t8b)){ 
		$tab .= '<!-- Linha 7 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t8a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t8b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t9a) && !empty($t9b)){ 
		$tab .= '<!-- Linha 8 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t9a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t9b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t10a) && !empty($t10b)){ 
		$tab .= '<!-- Linha 9 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t10a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t10b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t11a) && !empty($t11b)){ 
		$tab .= '<!-- Linha 10 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t11a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t11b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t12a) && !empty($t12b)){ 
		$tab .= '<!-- Linha 11 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t12a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t12b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t13a) && !empty($t13b)){ 
		$tab .= '<!-- Linha 12 -->\n';
		$tab .= '<tr style=\"background-color:#EEEEEE;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t13a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t13b.'</td>\n';
		$tab .= '</tr>\n\n';
	}
	
	if(!empty($t14a) && !empty($t14b)){ 
		$tab .= '<!-- Linha 13 -->\n';
		$tab .= '<tr style=\"background-color:#D9E2F3;\">\n';
		$tab .= '<td width=\"20%\" style=\"border:1px solid #AAAAAA; border-top:none; padding:5px; padding-top:5px; font-size:10pt; font-weight:800;\">'.$t14a.'</td>\n';
		$tab .= '<td width=\"80%\" style=\"border:1px solid #AAAAAA; border-left:none; border-top:none; padding:5px; padding-top:5px; font-size:10pt;\">'.$t14b.'</td>\n';
		$tab .= '</tr>\n\n';
	}		
	
	$tab .= '</tbody>\n';
	$tab .= '</table>\n';
	
	if(!empty($t15a)){ 
		$tab .= '<!-- descrição extra do artigo -->\n';
		$tab .= '<div style=\"font-size:14pt; font-family: Roboto; padding:5px; padding-top:10px; font-weight:900;\">'.$t15a.'</div>\n';
		$tab .= '<div style=\"font-size:12pt; font-family: Roboto; padding:5px; padding-top:10px; font-weight:900;\">'.$t15b.'</div>\n';	
	}
  echo '<script>
		  $(function(){
			  $("#preto").show();
			  $("#modalHtml").modal("show");
			  $("#gerado").val("'.$tab.'");
		  });
		  </script>';
}
  
  

 

[Frank K Hosaka]

O jeito mais fácil de zebrar uma tabela que eu vi foi pelo Bootstrap, usando  <table class='table table-striped'>.

O correto é usar o PHP, mas ontem fiquei imaginando como usar o JavaScript para gerar uma tabela. O código a seguir tem erro de lógica, ele pressupõe que o usuário vá preencher o formulário na sequência. Mas se o usuário querer voltar um pouco para trás, o programa não funciona! Eu não sei como consertar isso. Ou seja, daqui posso concluir que o melhor jeito é usar o PHP, enquanto o usuário fica pensando na vida, o PHP guarda o que já foi feito em um banco de dados.

astudy.html

<script>
controle=0
function inserirLinha(table,var1,var2){
    row=table.insertRow()
    cell=row.insertCell()
    text=document.createTextNode(var1)
    cell.appendChild(text)
    cell.setAttribute("width","20%")
    cell.setAttribute("style","border:1px solid")
    cell=row.insertCell()
    text=document.createTextNode(var2)
    cell.appendChild(text)
    cell.setAttribute("style","border:1px solid")}
function ver(){
    es=document.getElementsByName('txt[]')
    divTitulo.innerHTML=es[0].value
    divDescricao.innerHTML=es[1].value
    table=document.querySelector("table")
    if((es[2].value && es[3].value && controle==0)){
        inserirLinha(table,es[2].value,es[3].value)
        controle++}
    if((es[4].value && es[5].value && controle==1)){
        inserirLinha(table,es[4].value,es[5].value)
        controle++}
    if((es[6].value && es[7].value && controle==2)){
        inserirLinha(table,es[6].value,es[7].value)}}
</script>
<style>
.table-striped>tbody>tr:nth-child(2n+1){background-color:lightgray}
.table-striped>tbody>tr:nth-child(2n){background-color:whitesmoke}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" 
    crossorigin="anonymous">
<body style="width:70%;margin:0 auto">
<div style="height:5%"></div>
<input name=txt[] placeholder='titulo do artigo' required>
<input name=txt[] placeholder='descricao'required onchange=ver()><br>
<input name=txt[] placeholder='linha1' onchange=ver()>
<input name=txt[] placeholder='linha1' onchange=ver()><br>
<input name=txt[] placeholder='linha2' onchange=ver()>
<input name=txt[] placeholder='linha2' onchange=ver()><br>
<input name=txt[] placeholder='descricao' onchange=ver()>
<input name=txt[] placeholder='extra' onchange=ver()>
<div id=divTitulo style=font-size:16pt;font-weight:bold;padding:10px;font-family:Roboto></div>
<div id=divDescricao style=font-size:12pt;padding:10px;font-family:Roboto></div>
<div id=divTabela>
    <table class='table table-striped' width=100% border=1 cellspacing=0 cellpadding=0 style=font-family:Roboto,sans-serif>
    <tbody>
</div>

 

Editado Janeiro 29, 2023 por Frank K Hosaka