Agregar botones de editar y eliminar en cada una de las filas de mi tabla usando JS y Bootstrap

publicado por: Anonymous

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.

solución

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>`
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *