How to call an ID in HTML more than once?

Asked

Viewed 1,224 times

0

How to call an id more than once ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Agenda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/w3.css">
</head>
<style>
.alert {
    padding: 20px;
    background-color: #ff9800;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
<!--
.esconde{
display:none;
}-->
.aparece{
display:inline;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function muda(){
    classe = document.getElementById('tst').className; 
    if(classe == 'esconde'){
       document.getElementById('tst').className = 'aparece';
   }else{
       document.getElementById('tst').className = 'esconde';
   }
}
//-->
</script>

<?php
error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
// definições de host, database, usuário e senha
$host = "localhost";
$db   = "agenda";
$user = "root";
$pass = "";
// conecta ao banco de dados
$con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR); 
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
$consulta = $_GET['consulta'];
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT id, NOME, EMAIL, TELEFONE, TELEFONE2, TELEFONE3, TELEFONE4, EMPRESA, ENDERECO FROM contatos WHERE `contatos`.`NOME` LIKE  '$consulta'");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>
<body background="img/BH (1192)2.jpg" style="background-repeat:no-repeat;">
			<div class="form-group w3-padding-32 w3-content">
			<a href="cadastro.html" ><button class="btn btn-success center">Novo Contato</button></a>
			<a onClick="document.location.reload(true)" ><button  class="btn btn-info center">Atualizar</button></a>
			<a onClick="muda();"><button class="btn btn-warning center">Editar</button></a>
			<a href="../choice.html" ><button class="btn btn-danger center">Sair</button></a>
</div>
<div class="esconde" id="tst">
<div class="alert w3-content">
  O Modo de edição está <strong> ATIVO </strong>
</div>
</div>
		<div class="form-group w3-padding-32 w3-content">
<div class=" w3-container w3-content">
<br>
<form method="GET" action="busca.php?consulta=<?$consulta?>">
<label for="consulta"><font color="#ffffff">Buscar:</font></label>
<input type="text" value="<?=$consulta?>" id="consulta" name="consulta" maxlength="255" required />
<button type="submit" class="btn-primary"><i class="fa fa-search"></i></button>
</form>
</div>
</div>

<div class="w3-table-all w3-container w3-card">
<table border=1 style="font-size:11px;width:1280px">
			<tr>
			<th>Nome</th>
			<th>Email</th>
			<th>Telefones</th>
			<th>Empresa</th>
			<th>Endereço</th>
			<div class="esconde" id="tst">
			<th>Deletar</th>
			<th>Editar</th>
			</div>
			</tr>
<?php
	// se o número de resultados for maior que zero, mostra os dados
	if($total > 0) {
		// inicia o loop que vai mostrar todos os dados
		do {

?>

			<tr>
			<td><?=$linha['NOME']?></td>
			<td><?=$linha['EMAIL']?></td>
			<td><?=$linha['TELEFONE']?><br>
			<?=$linha['TELEFONE2']?><br>
			<?=$linha['TELEFONE3']?><br>
			<?=$linha['TELEFONE4']?></td>
			<td><?=$linha['EMPRESA']?></td>
			<td><?=$linha['ENDERECO']?></td>
			<div class="esconde" id="tst">
		<td><a href="#" onclick="javascript: if (confirm('Você realmente deseja excluir este Contato ?'))location.href='excluir.php?id=<?=$linha['id']?>'" style="margin-left:13px"><i class="fa fa-trash-o w3-xlarge"></i></a></td>
			<td><a href="#" onclick="javascript: location.href='troca.php?id=<?=$linha['id']?>'" style="margin-left:13px"><i class="fa fa-pencil w3-xlarge"></i></a></td>
			</div>
        	</tr>
<?php			
		// finaliza o loop que vai mostrar os dados
		}while($linha = mysql_fetch_assoc($dados));
	// fim do if 
	}
?>
</table>
</div>
</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>

On this page the id tst is only displayed when you click edit, but you cannot call id more than once. Solutions?

PS: Ignore the PHP AND Mysql part

javascript html css
  • 1

    Why do you want to call more than once?

  • 1

    Change the ID to class, what is the need to call it more than once? explain your question better

  • To make other parts disappear also that in the case is the edit and delete at the end of the table............

1 answer

0


Ids are attributes that cannot be repeated, this is because ID means "Identity", ie two elements cannot have the same identity.

Perhaps the ideal would be to create an ID for each one, to adjust you can exchange getElementById for another attribute, as a custom HTML5 attribute called data-, let’s call it data-toggle="...", the function should look like this:

var modoedicao = false; //Inicia como false, modo edição "desligado"

function muda(id){
   modoedicao = !modoedicao;//Alterna entre edição e leitura

   var els = document.querySelectorAll('[data-toggle]');

   for (var i = 0; i < els.length; i++) {
        if (modoedicao) {
           array[i].className = 'aparece';
        } else {
           array[i].className = 'esconde';
        }
   }
}

And the HTML elements should look like this:

<div class="esconde" data-toggle="tst">
  • 1

    Thanks friend here worked perfectly thank you........

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.