0

Buen día Tengo una consulta, como puedo hacer crear una lista desplegable dentro de una tabla? La tabla posee 9 columnas, y en la primer columna hay input[radio] Lo que deseo, es que, al seleccionar el input[radio], este me despliegue una fila nueva justo abajo de la fila seleccionada, sin afectar a las demás y que esta cubra las 9 columnas

Si me pudieran ayudar se los agradecería

Este es el código, el cual estoy usando para mostrar la nueva fila, pero de momento solo he logrado que me la muestre en la misma columna del input[radio], y necesito que esa nueva fila me abarque todas las columnas

function mostrarMarcas(proveedorId){
  var coll = $(".container");
  var i;

  for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var content = this.nextElementSibling;
          if (content.style.maxHeight){
              content.style.maxHeight = null;
          } else {
              content.style.maxHeight = content.scrollHeight + "px";
          } 
      });
  }
}
<tr>
  <td style="width: 20px;">
      <label class="container">
          <input class="checkMarcas" type="radio" name="radioCheck" id="radioCheck" onclick="mostrarMarcas(<?php echo $datProveedor["proveedorId"]; ?>)">
          <span class="checkmark"></span>
          <i></i>
      </label>
      <div class="contenido" >
          Hola mundo
      </div>
  </td>
  <td>Columna 2</td>
  <td>Columna 3</td>
  <td>Columna 4</td>
  <td>Columna 5</td>
  <td>Columna 6</td>
  <td>Columna 7</td>
  <td>Columna 8</td>
  <td>Columna 9</td>
</tr>

4
  • 1
    no entiendo muy bien cual es el error o la pregunta que planteas aca.
    – David081
    Commented el 21 mar. 2023 a las 14:44
  • Envías algo como parámetro a mostrarMarcas(), eso sería la cantidad de filas que quieres agregar cuando des clic al radio botton?... Commented el 21 mar. 2023 a las 15:00
  • No perdón, ese parámetro se me fue. No lo estoy usando para nada Commented el 21 mar. 2023 a las 15:05
  • Ah ok entiendo entonces al seleccionar el radio botton solo crea una fila debajo, no tiene nada que ver el parámetro... Commented el 21 mar. 2023 a las 15:09

1 respuesta 1

1

Fácilmente lo harías así:

Capturas la tabla, a la tabla le insertas una fila con insertRow(), luego con insertCell() agregas celdas a la fila que se insertó, y a cada celda, le agregas un texto con innerHTML, todo en un ciclo for para rellenar las 9 columnas de la fila, ejemplo:

function mostrarMarcas() {
  var tabla = document.getElementsByTagName("table")[0]; // Capturo la tabla
  var fila = tabla.insertRow(); // A la tabla, inserto una fila, esto lo guardo en la variable "fila"
  // Hago un for para llenar todas las celdas de la fila (que son 9)
  for (var i = 0; i < 9; i++) {
    var celda = fila.insertCell(); // A la fila insertada, le agrego celdas en la fila la cantidad de veces del "for"
    // y cada celda que agregue, tendrá este contenido.
    celda.innerHTML = `
      <td>Ejemplo</td>
    `;
  }
}
<table border="1px">
  <tr>
    <td style="width: 20px;">
      <label class="container">
        <input class="checkMarcas" type="radio" name="radioCheck" id="radioCheck" onclick="mostrarMarcas()">
        <span class="checkmark"></span>
        <i></i>
      </label>
      <div class="contenido" >
        Hola mundo
      </div>
    </td>
    <td>Columna 2</td>
    <td>Columna 3</td>
    <td>Columna 4</td>
    <td>Columna 5</td>
    <td>Columna 6</td>
    <td>Columna 7</td>
    <td>Columna 8</td>
    <td>Columna 9</td>
  </tr>
</table>

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.