0

Mi duda es como puedo hacer que se agreguen botones de editar y eliminar a cada una de las filas de mi tabla, ya que esta se rellena por medio de un formulario que se visualiza por medio de una ventana emergente (Bootstrap modal), este es el código que tengo:

HTML

<div class="table-responsive">
<table id="Usuarios" class="table table-bordered table-striped table-hover">
<thead>
<tr class="table-header">
  <th>ID</th>
  <th>Número de empleado</th>
  <th>Área</th>
  <th>Nombre</th>
  <th>Apellido</th>
  <th>Tipo de Usuario</th>
  <th>Opciones</th>
</tr>
</thead>
<tbody>
  <tr role="row" class="odd">
  </tr>
</tbody>
</table>
</div>


<div class="container">


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Add_Us_New">
  Agregar Usuario Nuevo
</button>
</div>

<div class="modal fade" id="Add_Us_New">
  <div class="modal-dialog"> 
    <div class="modal-content">
      <div class="modal-header">
        <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title">Agregar Usuario</h4>
          </div>
          <div>
            <p>
              <label>ID Empleado</label> <br>
              <input id="idemp" class="form-control" type="text" placeholder="ID Empleado"><br>
            </p>
            <p>
              <label>Nombre</label> <br>
              <input id="nombre" class="form-control" type="text" placeholder="Nombre"><br>
            </p>
            <p>
              <label>Apellido</label> <br>
              <input id="apellido" class="form-control" type="text" placeholder="Apellido"> <br>
            </p>
            <p>
              <label>Número de Empleado</label> <br>
              <input id="numemp" class="form-control" type="text" placeholder="Número"> <br>
            </p>
            <p>
              <label>Área</label> <br>
              <input id="area" class="form-control" type="text" placeholder="Área"> <br>
            </p>
            <p>
              <label>Tipo de Usuario</label> <br>
              <input id="tipo_usuario" class="form-control" type="text" placeholder="Tipo de Usuario"> <br>
            </p>
          </div>
          <div class="modal-footer">
           <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
           <button id="btn_guardar" class="btn btn-success" onclick="guardar()">Guardar</button><br>
           </div>  
        </div>
       </div>
      </div>

JS

function guardar(){

    var _idEmp = document.getElementById("idemp").value;
    var _nombre = document.getElementById("nombre").value;
    var _apellido = document.getElementById("apellido").value;
    var _numemp = document.getElementById("numemp").value;
    var _area = document.getElementById("area").value;
    var _tipoUs = document.getElementById("tipo_usuario").value;

    var fila="<tr><td>"+_idEmp+"</td><td>"+_nombre+"</td><td>"+_apellido+"</td><td>"+_numemp+"</td><td>"+_area+"</td><td>"+_tipoUs+"</td></tr>";

    var btn = document.createElement("TR");
    btn.innerHTML=fila;
    document.getElementById("Usuarios").appendChild(btn);


     if (confirm('¿Agregar usuario nuevo?')) {
       document.form1.submit();
       document.getElementById("myForm").reset();
    }
}

Eh intentado poniendo botones en

 var fila="<tr><td>"+_idEmp+"</td><td>"+_nombre+"</td><td>"+_apellido+"</td><td>"+_numemp+"</td><td>"+_area+"</td><td>"+_tipoUs+"</td></tr>";

Ya que esto es lo que se visualiza y agrega a mi tabla cuando relleno el formulario pero no me manda los datos a la tabla, solo así sin agregar botones me aparecen agregados los datos.

Soy novata en esto y agradecería me ayudaran.

7
  • Tu problema es que al momento de añadir un botón los datos no se muestran, pero si quitas el botón sí lo hace? Eso es? Commented el 3 jul. 2019 a las 18:38
  • @PauloUrbanoRivera así es, cuando agrego los botones no se agregan los datos que yo ingreso en el formulario.
    – ClauBal
    Commented el 3 jul. 2019 a las 18:42
  • agregando : "<td><button>editar</button></td>" antes de "</tr>" no funciona? Commented el 3 jul. 2019 a las 18:46
  • @ChristianCarrillo Nop, ya lo agregué y al dar guardar en mi formulario no se agregan los datos a mi tabla, ni me aparece el mensaje de confirmacion que puse.
    – ClauBal
    Commented el 3 jul. 2019 a las 18:49
  • a mi me funciona, debes estar comiéndote un cierre de etiqueta o algo, envía pm si no. Commented el 3 jul. 2019 a las 18:52

1 respuesta 1

0

tu variable fila debería ser:

var fila="<tr>"+
      "<td>"+_idEmp+"</td>"+
      "<td>"+_nombre+"</td>"+
      "<td>"+_apellido+"</td>"+
      "<td>"+_numemp+"</td>"+
      "<td>"+_area+"</td>"+
      "<td>"+_tipoUs+"</td>"+
      "<td><button>editar</button></td>"+
      "<td><button>eliminar</button></td>"+
      "</tr>";

o con la sintaxis moderna:

var fila=`<tr>
      <td>${_idEmp}</td>
      <td>${_nombre}</td>
      <td>${_apellido}</td>
      <td>${_numemp}</td>
      <td>${_area}</td>
      <td>${_tipoUs}</td>
      <td><button>editar</button></td>
      <td><button>eliminar</button></td>
    </tr>`
1
  • LISTO! Ya aparecen, ahora me queda hacerlos funcionales. Muchas gracia por la ayuda! :)
    – ClauBal
    Commented el 3 jul. 2019 a las 21:04

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.