1

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>

2
  • ¿Qué es lo que quieres exactamente? ¿Que si se hace click en, por ejemplo, el <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.
    – phpMyGuel
    Commented el 19 jul. 2019 a las 8:16
  • basicamente es eso lo que quiero, que cuando se haga click como tu dices en el A que se añada en el div de abajo, si pudes hacer un ejemplo con lo que me sugieres te lo agradecería mucho :D Commented el 19 jul. 2019 a las 8:22

1 respuesta 1

3

Lo único que tendrías que hacer es atacharle un evento click a los <td> de tu tabla, para por medio del this saber a que elemento se le ha hecho click para poder recuperar el texto que tenga dentro del <td> y añadirlo al final del <div> preparado para acogerlo.

$(function () {
  $('table td').click(function () {
    $('#etiquetas-seleccionadas').append('<p>' + $(this).text() + '</p>');
  });
});
#tableTitle{
  background-color:#595151;
  color:#ffffff;
}

table{
  width: 100%;
  text-align: center;
  margin: auto;
}

.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<div class="container">
    <div class="sticker">
      <div id="stickerTitle">
        <a class="modify" href="?modify=true"> Modify</a>
        <h1>Supscriptions</h1>
      </div>
      <div id="etiquetas-seleccionadas">
        <p>Etiquetas seleccionadas</p>
        
      </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>

1
  • Muchisimas gracias phpMyGuel, es justo lo que quería. Mis 10 :D Commented el 19 jul. 2019 a las 9:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.