1

Tengo una duda de como realizar esto, os cuento a ver si me podeís ilustrar como puedo realizarlo. Tengo una tabla que relleno con datos de la base de datos y una de las columnas son 3 botones, en cada fila aparecen sus respectivos botones, en los que cada uno enlaza con una acción, ver datos, modificar datos y eliminar datos, al pulsar debería mandarme a dicha página con el respectivo id del dato de la fila elegida. El problema que no se como recoger dicho valor ya que no puedo usar formulario al ser 3 botones diferentes. He pensado que con javaScript podría recoger el valor del id y mandarlo al respectivo botón. Pero no se si esa es la forma correcta, ya que no termino de verla. ¿Alguna idea?

He probado recoger los valores del td con id="" pero resulta que el alert que imprimo con javascript aparece indefinido, adjunto el código utilizado:

<script>
function verId(){
    var id = document.getElementById("id1").value;
    alert ("El nombre es: "+id);
}

<td id="id1">'.utf8_encode($fila['nombre']).'</td>
2
  • 1
    Actualizo esto.
    – Lorenzo
    Commented el 30 nov. 2019 a las 11:05
  • 1
    .value es para inputs, usa .innerHTML, porque no usa un <a href="url">'.utf8_encode($fila['nombre']).'</a>
    – Kevin
    Commented el 30 nov. 2019 a las 12:43

2 respuestas 2

2

  (() => {
    class App {
      constructor() {
        this.ObjDesigner = {};
      }
      Initialize() {
        try {
          this.Designer();
          this.Create();
        } catch (error) {
          console.error("app.html/Initialize =>", error)
        }
      }
      Designer(){
        try {
          this.ListButtons = [...document.getElementsByClassName("btnActions")];

        } catch (error) {
          console.error("app.html/Designer =>", error)
        }
      }
      Create(){
        try {
          this.ListButtons.forEach((itemElementHTml, index) => {
            itemElementHTml.dataset.id = `${index}_${new Date().getTime().toString()}`;
            this[itemElementHTml.innerText] && itemElementHTml.addEventListener("click", this[itemElementHTml.innerText], false)
          })
        } catch (error) {
          console.error("app.html/Designer =>", error)
        }
      }
      EventAdd(event) {
        try {
          alert(event.target.dataset.id)
        } catch (error) {
          console.error("app.html/EventAdd =>", error)

        }
      }
      EventUpdate(event) {
        try {
          alert(event.target.dataset.id)
        } catch (error) {
          console.error("app.html/EventUpdate =>", error)

        }
      }
      EventDelete(event) {
        try {
          alert(event.target.dataset.id)
        } catch (error) {
          console.error("app.html/EventDelete =>", error)

        }
      }
    }
    const objApp = new App();
    objApp.Initialize();
  }
  )();
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }
  </style>
<body>

  <h2>App</h2>
  <table>
    <tr>
      <th>Field01</th>
      <th>Field02</th>
      <th>Field03</th>
    </tr>
    <tr>
    <tr>
      <td>Data01</td>
      <td>Data01</td>
      <td>
        <button class="btnActions">EventAdd</button>
        <button class="btnActions">EventUpdate</button>
        <button class="btnActions">EventDelete</button>
      </td>
    </tr>
    <tr>
      <td>Data01</td>
      <td>Data01</td>
      <td>
        <button class="btnActions">EventAdd</button>
        <button class="btnActions">EventUpdate</button>
        <button class="btnActions">EventDelete</button>
      </td>
    </tr>
  </table>

</body>

Puedes utilizar el API dataset, la cual te permite se cierto modo guardar información.Esto lo puedes setear en tus mismo botones, recuerda encriptar tus datos. Cuando dibujes datos dinámicos no es recomendable utilizar id en el control de Html, ya que puede existir "datos duplicados".

1
  • Esto es a lo que me refería, muchas gracias por la respuesta, me ha servido de mucho.
    – Lorenzo
    Commented el 1 dic. 2019 a las 10:48
2

Este código te permite capturar el texto del elemento que estás pulsando:

<p onclick="verId()">Ver</p>
<p onclick="verId()">Editar</p>
<p onclick="verId()">Borrar</p>

<script type="text/javascript">
    function verId(){
        window.onclick = e => {
            console.log(e.target.innerText);
        } 
    }
</script>

No es la mejor manera de hacerlo, pero te da una idea de como capturar un evento. Empieza por aquí y desarrolla tu propio código.

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.