Mi problema es el siguiente; tengo una tabla de la cual quiero que si el usuariio clica en uno de los elementos de la tabla se añada aun div que hay más abajo, el problema viene cuando intento reproducir eso. Se que es posible pasar datos a distintas páginas mediante enlaces, puesto ques lo más común, y que se pueden usar los forms para pasar los valores al mismo html. ¿Alguien sabría como puedo hacer lo que busco? ¿Debería usar botones o links en los elementos de la tabla para conseguir lo que quiero? Gracias por vuestra ayuda.
La estructura de la tabla(una simple):
#tableTitle{
background-color:#595151;
color:#ffffff;
}
table{
width: 100%;
text-align: center;
margin: auto;
}
<table>
<tbody>
<tr id="tableTitle">
<td colspan="4"> Choose the categories you are interested in.</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
</tbody>
</table>
Y la del div a la que quiero que se añadan los elementos:
.sticker{
width: 40%;
position: relative;
border: 1px solid #d6d9dc;
box-shadow: 0 2px 8px rgba(59,64,69,0.1);
font-size: 13px;
border-radius: 10px;
}
#stickerTitle{
border-top-left-radius:10px;
border-top-right-radius:10px;
margin-top: -18px;
padding-left: 10px;
padding-right: 10px;
background-color: #595151;
color:#ffffff;
}
#stickerTitle h1{
text-align: center;
}
#stickerTitle a{
padding-top: 5px;
cursor:pointer;
display:inline;
color:#ffffff;
float:right;
text-decoration: none;
}
#Isticker{
width: 80%;
border-radius: 5px;
}
#Bsticker{
width: 18%;
border-radius: 10px;
background-color: #86a39f;
color:#ffffff;
}
.container{
width:100%;
margin:auto;
overflow:hidden;
}
<div class="container">
<div class="sticker">
<div id="stickerTitle">
<a class="modify" href="?modify=true"> Modify</a>
<h1>Supscriptions</h1>
</div>
<div>
<p>Etiquetas seleccionadas</p>
<?php
?>
</div>
<form class="fsticker" action="<?php htmlspecialchars($_SERVER['PHP_SELF'])?>" method ="post">
<input id="Isticker" type= text placeholder= "Enter the category...">
<button id="Bsticker" type= submit >Add</button>
</form>
<td>
con la letra A esta aparezca en el<div>
que tienes preparado más abajo? Porque si es esto no te hace falta enviar el<form>
pudiendo realizarlo todo desde el frontend.