1

Tengo una tabla (como se muestrea en la imagen) y quisiera que cuando el botón de solicitar sea clickeado, mande los datos a un textarea y se muestren en una lista.

<textarea class="area" readonly name="area" id="summary" cols="30" rows="10"></textarea>

Los datos de la tabla los estoy llamando de una base de datos:

$sql = "SELECT * FROM inventarioutl INNER JOIN catalogo ON inventarioutl.herramienta = catalogo.id INNER JOIN tipo_herramienta ON catalogo.tipo = tipo_herramienta.id";
$result = $conn->query($sql);



if ($result->num_rows > 0) {
    echo (" <table width='800' class='bordered' cellpadding='1' cellspacing='0'>
    <tr style=''> <th></th> <th>Herramienta</th><th>Disponible</th><th>Categoría</th><th>Solicitar</th></tr>");
    while($row = $result->fetch_assoc()) {
        //echo print_r($row);
      echo "<tr'><td> <input style = 'display: none;' type='hidden' name = 'idusuario' value=".$info['id']."></td><td id = ".$row["descripcion"]." >".$row["descripcion"]."</td><td>".$row["qtyf"]."</td><td>".$row["tipo"]."</td><td> <input type='number' id = ".$row["herramienta"]." name='tentacles'
      min='1' max='20'> <button onClick='copiarDatos()' style='margin-top: 5px;' type='button' name = 'idherramienta' value=".$row["herramienta"].">Solicitar</button></td></tr>";
    }
    echo "</table>";
  } else {
    echo "No se encontraron herramientas";
  }
  $conn->close();

introducir la descripción de la imagen aquí

Había intentado hacerlo por con un script modificando los datos del dom, pero siempre me arroja datos como undefined:

echo (
    "<script>
    function copiarDatos() {
        var cautin = document.getElementById('Cautín').value;
        var cantidad = document.getElementById('4356').value;

        var texto = cautin + '     ' + cantidad;
        document.getElementsByClassName('area')[0].innerHTML = texto;
    }
    </script>"
    
);

1 respuesta 1

0

Tu código no es práctico. Es una locura querer asignar listeners a cada elemento. ¿Si tu tabla tiene cientos o miles de elementos vas a asignar cientos o miles de listeners?

Lo que se hace en estos casos es asignar un sólo listener, luego determinar dónde ocurrió el click y, tratándose de una tabla, jugar con la posición de cada celda para obtener los datos que interesan. Así el código te obtendrá lo que quieras con unas pocas líneas de código, sin tener que asignar un listener por el id de cada cosa.

Veamos un ejemplo. Comentaré cada cosa en el código para que se entienda, luego sólo tienes que modificar tu código PHP para producir un contexto parecido a este.

/* Alcanzamos todos los elementos button que haya*/
const allButtons = document.querySelectorAll("button");

/*
  *Asignamos el listener a todos los button
  *OJO: con esto no hace falta poner la función in-line en cada button
  *como hacías al principio. Lo cual además es una mala práctica
 */
allButtons.forEach(
  function(button) {
    button.addEventListener("click", copiarDatos, false);
  }
);

var mTextArea=document.getElementsByClassName('area')[0];

function copiarDatos() {
  /*
    Creamos una referencia al padre del botón
    que en este caso será el elemento tr
    Por lo general es una buena práctica crear referencias a los elementos
  */
  var theParent=event.target.parentNode.parentNode;
  /*
    *Obtenemos el valor de la herramienta
    *que está en la celda 2. Se usa el índice 1
    *porque los índices empiezan por 0
    *Según el tipo de elemento, deberá usarse textContent o value o lo que sea
  */
  var mHerramienta = theParent.cells[1].textContent;

  /*
    *Obtenemos el valor del input, que está en la celda 5
    *Nótese que aquí se usa children[0] porque
    *tienes varios elementos en esa celda
    *y se usa value porque es un input
  */
  var mCantidad = theParent.cells[4].children[0].value;

  mTextArea.textContent += `${mHerramienta} \t${mCantidad}\n`;
}
<table width='800' class='bordered' cellpadding='1' cellspacing='0'>
  <tr style=''>
    <th></th>
    <th>Herramienta</th>
    <th>Disponible</th>
    <th>Categoría</th>
    <th>Solicitar</th>
  </tr>

  <tr>
    <td> <input style='display: none;' type='hidden' name='idusuario' value="1"></td>
    <td id="Cautín">Cautín</td>
    <td>40</td>
    <td>Metal</td>
    <td> <input type='number' id="x" name='tentacles' min='1' max='20'> <button style='margin-top: 5px;' type='button' name='idherramienta'>Solicitar</button></td>
  </tr>

  <tr>
    <td> <input style='display: none;' type='hidden' name='idusuario' value="1"></td>
    <td id="Martillo">Martillo</td>
    <td>15</td>
    <td>Madera</td>
    <td> <input type='number' id="x" name='tentacles' min='1' max='20'> <button style='margin-top: 5px;' type='button' name='idherramienta'>Solicitar</button></td>
  </tr>

  <tr>
    <td> <input style='display: none;' type='hidden' name='idusuario' value="1"></td>
    <td id="Test">Test</td>
    <td>30</td>
    <td>Otro</td>
    <td> <input type='number' id="x" name='tentacles' min='1' max='20'> <button style='margin-top: 5px;' type='button' name='idherramienta'>Solicitar</button></td>
  </tr>

</table>

<textarea class="area"></textarea>

Este código toma el nombre de la herramienta y el valor que se ponga en el input y te lo muestra en el textarea al presionar el botón de esa fila. Si necesitas más cosas, podrás obtenerlas usando una técnica parecida a la que se usó para obtener mHerramienta y mCantidad.

Si no entiendes algo dilo en comentarios.

8
  • Muchas gracias por la ayuda, quisiera saber cuál sería la forma más óptima de mostrar la salida de var texto = ${mHerramienta} ${mCantidad}; en una lista y también que se vayan acumulando en forma de lista.
    – AdrianRN
    el 18 oct. 2021 a las 14:35
  • @AdrianRN en ese caso basta con concatenar, usando += y agregar un salto de línea \n al final. Revisa el nuevo código. Como buena práctica, he creado una sola referencia a los elementos, para luego usar esa referencia en las actualizaciones /usos posteriores.
    – A. Cedano
    el 18 oct. 2021 a las 14:43
  • Me pasa que se está imprimiendo dos veces, algo así: Cautín 2 Cautín 2 Pinzas de corte 8 Pinzas de corte 8
    – AdrianRN
    el 18 oct. 2021 a las 14:55
  • @AdrianRN puede que hayas omitido algo o repetido la referencia. Observa que yo he creado una referencia al textArea al principio: var mTextArea=document.getElementsByClassName('area')[0]; y que en lo adelante uso solamente esa referencia. Quizá dejaste en el código lo que había antes: document.getElementsByClassName('area')[0] también dentro de la función ¿?
    – A. Cedano
    el 18 oct. 2021 a las 15:04
  • Ya revisé y lo tengo igual, no tengo algún document.getElementsByClassName('area')[0] repetido y la referencia también la tengo bien, solo se declara y despues se manda a llamar con la referencia. alguna idea?
    – AdrianRN
    el 18 oct. 2021 a las 15:31

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.