2

Espero puedan ayudarme. Estoy haciendo un booking de viajes y tengo un formulario que al darle al enlace mostrar me muestra el formulario dos y luego me da la opción de ocultarlo cuando no lo necesito. El problema es cuando quiero agregarle otra tabla que me muestre un formulario tres, el cual no sé como hacerlo.

function desplegar(tabla_a_desplegar, estadoT, estadoTfila) {
  var tablA = document.getElementById(tabla_a_desplegar);
  var estadOt = document.getElementById(estadoT);
  var fila = document.getElementById(estadoTfila);

  switch (tablA.style.display) {
    case "none":
      tablA.style.display = "block";
      estadOt.innerHTML = "Ocultar";
      fila.innerHTML = "";
      fila.innerHTML = " La fila de id: " + fila.id + ". Contiene: " + fila.innerHTML + " :: " + fila.style.background;
      break;
    default:
      tablA.style.display = "none";
      estadOt.innerHTML = "+Habitacion"
      break;
  }


}
<table style="margin-left:27px; margin-right:27px">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 1</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegar('tabla_a_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>

  </tbody>
</table>
<table id="tabla_a_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 2</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegardos('tabla_b_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>


<table id="tabla_b_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 3</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>



      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px;">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px; ">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>
</tbody>
</table>
<table style="margin-left:180px">
  <tbody>
    <tr>
      <td>
        <button style="margin: 0 auto" type="button" class="btn btn-success">Buscar</button>
      </td>
    </tr>
  </tbody>
</table>





  

2
  • Te recomiendo que aprendas a usar un framework estilo AngularJS o Knockout que te permitan hacer este tipo de interfaces de una manera simple y con poco código. Por ejemplo esto se asemeja a lo que necesitas: knockoutjs.com/examples/cartEditor.html el 21 mar. 2016 a las 2:55
  • Gracias Carlos por tu gran aporte una manera diferente e interesante para ir mostrado y ocultando investigare en los framework que mencionas para poder seguir aprendiendo y ayudarme con estas herrramientas. Gracias por el aporte. Saludos. el 21 mar. 2016 a las 20:54

1 respuesta 1

1

Hay un par problemas en el código que generan los fallos:

  1. Cuando pulsas en el enlace + Habitacion de la segunda habitación, se está llamando a una función llamada desplegardos que no existe:

    <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegardos('tabla_b_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
    

    posiblemente esto es legado por cómo estabas haciéndolo antes. Para solucionar este problema, cambia desplegardos por desplegar y ya funcionará:

    <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegar('tabla_b_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
    
  2. Ahora hay otro problema, se muestra la tercera habitación, pero el texto sigue siendo + Habitacion en lugar de Ocultar. Esto ocurre porque en el código hay IDs repetidos (estadoT al menos), y al hacer un document.getElementById() de un ID repetido, el navegador no te está devolviendo el esperado (o no te está devolviendo ninguno).

    La solución también es sencilla, cambia el ID de la segunda tabla de estadoT a estadoT2 (y también en la llamada al JavaScript para evitar problemas):

    <a class="registro registrolinea habitacion" id="estadoT2" onClick="desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
    

Una vez soluciones esos dos problemas, el código ya funcionará bien. Nota que los cambios fueron todos en la misma línea de código.


Puedes ver el código corregido en esta demo:

function desplegar(tabla_a_desplegar, estadoT, estadoTfila) {
  console.log(estadoT)
  var tablA = document.getElementById(tabla_a_desplegar);
  var estadOt = document.getElementById(estadoT);
  var fila = document.getElementById(estadoTfila);

  switch (tablA.style.display) {
    case "none":
      tablA.style.display = "block";
      estadOt.innerHTML = "Ocultar";
      fila.innerHTML = "";
      fila.innerHTML = " La fila de id: " + fila.id + ". Contiene: " + fila.innerHTML + " :: " + fila.style.background;
      break;
    default:
      tablA.style.display = "none";
      estadOt.innerHTML = "+Habitacion"
      break;
  }


}
<table style="margin-left:27px; margin-right:27px">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 1</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT" onClick="desplegar('tabla_a_desplegar','estadoT', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>

  </tbody>
</table>
<table id="tabla_a_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 2</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">
          <a class="registro registrolinea habitacion" id="estadoT2" onClick="desplegar('tabla_b_desplegar','estadoT2', 'estadoTfila')" style="background: #AEE756; cursor: pointer;">+ Habitacion</a>
        </p>
      </td>


      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>


<table id="tabla_b_desplegar" style="margin-left:26px; margin-right:27px; margin-top:-15px; display:none; ">
  <tbody>
    <tr>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px">Habitacion 3</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px; margin-left:-09px">Adulto</p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px">&nbsp;Ni&ntilde;o</p>
      </td>
    </tr>
    <tr>



      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left; margin-top:12px;">
          <select class="form-control seleccionunoir" id="sel1">

            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <p style="font-family: 'Roadgeek 2005 Series 1B', sans-serif; font-size:16px; color:#000000; text-align:left;margin-top:12px; ">
          <select class="form-control selecciondosir" id="sel1">

            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>



          </select>
        </p>
      </td>
    </tr>
  </tbody>
</table>
<table style="margin-left:180px">
  <tbody>
    <tr>
      <td>
        <button style="margin: 0 auto" type="button" class="btn btn-success">Buscar</button>
      </td>
    </tr>
  </tbody>
</table>

1
  • Muchas gracias Alvaro era exactamente lo que quería muy bien explicada tu código excelente ayuda ya puedo seguir con mi proyecto y seguir aprendiendo de estos lenguaje gracias nuevamente por tu explicacion el 21 mar. 2016 a las 20:50

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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