Skip to main content
Agregando Modal para que quede mas completo el ejemplo para el usuario
Origen Enlace
let botones = document.querySelectorAll('[data-target="#modaleditar"]');
botones.forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener columnas desde TR padre:
        let tds = this.closest('tr').querySelectorAll('td');
        // Obtener ID desde el botón
        let id = this.dataset.id;
        // Obtener datos por contenido de TD:
        let nombre = tds[0].innerText;
        let cedula = tds[1].innerText;
        let fecha = tds[6].innerText;
        // Asignar datos a ventana modal:
        document.querySelector('#id_estudiante').value = id;
        document.querySelector('#estudiante').value = nombre;
        document.querySelector('#cedula').value = cedula;
    });
    // Este evento es solo para probar, seguramente ya lo tienes activo
    btnconsole.addEventListenerlog('click','abrir function(modal') {;
        document.querySelector$('#modaleditar').style.display = 'block';modal();
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table id="tabla" class="table">
    <thead>
        <tr>
            <th class="text-center">Estudiante</th>
            <th class="text-center">Cédula</th>
            <th class="text-center">Carrera</th>
            <th class="text-center">Sección</th>
            <th class="text-center">Trayecto</th>
            <th class="text-center">Solicitud</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Status</th>
            <th class="text-center">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">Nombre 1</td>
            <td class="text-center">Cédula 1</td>
            <td class="text-center">Carrera 1</td>
            <td class="text-center">Sección 1</td>
            <td class="text-center">Trayecto 1</td>
            <td class="text-center">Solicitud 1</td>
            <td class="text-center">08-jun/2020</td>
            <td class="text-center">Status 1</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="1" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
        <tr>
            <td class="text-center">Nombre 2</td>
            <td class="text-center">Cédula 2</td>
            <td class="text-center">Carrera 2</td>
            <td class="text-center">Sección 2</td>
            <td class="text-center">Trayecto 2</td>
            <td class="text-center">Solicitud 2</td>
            <td class="text-center">01-jun/2020</td>
            <td class="text-center">Status 2</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="2" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="modaleditar" style="display:none;">role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id_estudiante" id="id_estudiante">
    <input type="text" name="estudiante" id="estudiante" placeholder="Nombre y apellidos"><br>
    <input type="text" name="cedula" id="cedula" placeholder="Cédula">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
let botones = document.querySelectorAll('[data-target="#modaleditar"]');
botones.forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener columnas desde TR padre:
        let tds = this.closest('tr').querySelectorAll('td');
        // Obtener ID desde el botón
        let id = this.dataset.id;
        // Obtener datos por contenido de TD:
        let nombre = tds[0].innerText;
        let cedula = tds[1].innerText;
        let fecha = tds[6].innerText;
        // Asignar datos a ventana modal:
        document.querySelector('#id_estudiante').value = id;
        document.querySelector('#estudiante').value = nombre;
        document.querySelector('#cedula').value = cedula;
    });
    // Este evento es solo para probar, seguramente ya lo tienes activo
    btn.addEventListener('click', function() {
        document.querySelector('#modaleditar').style.display = 'block';
    });
});
<table id="tabla" class="table">
    <thead>
        <tr>
            <th class="text-center">Estudiante</th>
            <th class="text-center">Cédula</th>
            <th class="text-center">Carrera</th>
            <th class="text-center">Sección</th>
            <th class="text-center">Trayecto</th>
            <th class="text-center">Solicitud</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Status</th>
            <th class="text-center">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">Nombre 1</td>
            <td class="text-center">Cédula 1</td>
            <td class="text-center">Carrera 1</td>
            <td class="text-center">Sección 1</td>
            <td class="text-center">Trayecto 1</td>
            <td class="text-center">Solicitud 1</td>
            <td class="text-center">08-jun/2020</td>
            <td class="text-center">Status 1</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="1" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
        <tr>
            <td class="text-center">Nombre 2</td>
            <td class="text-center">Cédula 2</td>
            <td class="text-center">Carrera 2</td>
            <td class="text-center">Sección 2</td>
            <td class="text-center">Trayecto 2</td>
            <td class="text-center">Solicitud 2</td>
            <td class="text-center">01-jun/2020</td>
            <td class="text-center">Status 2</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="2" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<div id="modaleditar" style="display:none;">
    <input type="hidden" name="id_estudiante" id="id_estudiante">
    <input type="text" name="estudiante" id="estudiante" placeholder="Nombre y apellidos"><br>
    <input type="text" name="cedula" id="cedula" placeholder="Cédula">
</div>
let botones = document.querySelectorAll('[data-target="#modaleditar"]');
botones.forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener columnas desde TR padre:
        let tds = this.closest('tr').querySelectorAll('td');
        // Obtener ID desde el botón
        let id = this.dataset.id;
        // Obtener datos por contenido de TD:
        let nombre = tds[0].innerText;
        let cedula = tds[1].innerText;
        let fecha = tds[6].innerText;
        // Asignar datos a ventana modal:
        document.querySelector('#id_estudiante').value = id;
        document.querySelector('#estudiante').value = nombre;
        document.querySelector('#cedula').value = cedula;
        console.log('abrir modal');
        $('#modaleditar').modal();
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table id="tabla" class="table">
    <thead>
        <tr>
            <th class="text-center">Estudiante</th>
            <th class="text-center">Cédula</th>
            <th class="text-center">Carrera</th>
            <th class="text-center">Sección</th>
            <th class="text-center">Trayecto</th>
            <th class="text-center">Solicitud</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Status</th>
            <th class="text-center">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">Nombre 1</td>
            <td class="text-center">Cédula 1</td>
            <td class="text-center">Carrera 1</td>
            <td class="text-center">Sección 1</td>
            <td class="text-center">Trayecto 1</td>
            <td class="text-center">Solicitud 1</td>
            <td class="text-center">08-jun/2020</td>
            <td class="text-center">Status 1</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="1" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
        <tr>
            <td class="text-center">Nombre 2</td>
            <td class="text-center">Cédula 2</td>
            <td class="text-center">Carrera 2</td>
            <td class="text-center">Sección 2</td>
            <td class="text-center">Trayecto 2</td>
            <td class="text-center">Solicitud 2</td>
            <td class="text-center">01-jun/2020</td>
            <td class="text-center">Status 2</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="2" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="modaleditar" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Options</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id_estudiante" id="id_estudiante">
    <input type="text" name="estudiante" id="estudiante" placeholder="Nombre y apellidos"><br>
    <input type="text" name="cedula" id="cedula" placeholder="Cédula">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

No necesitas tener un formulario para cada cosa, basta con identificar a dónde pertenece el botón en que se hizo clic y tomar de ahí los datos correspondientes.

Para este ejemplo agregué id de estudiante en el dataset del botón (data-id="#") y escuchar el evento click, donde se busca la fila (TR) a la que pertenece el botón y se obtienen los datos desde cada columna (TD):

let botones = document.querySelectorAll('[data-target="#modaleditar"]');
botones.forEach(btn => {
    btn.addEventListener('click', function() {
        // Obtener columnas desde TR padre:
        let tds = this.closest('tr').querySelectorAll('td');
        // Obtener ID desde el botón
        let id = this.dataset.id;
        // Obtener datos por contenido de TD:
        let nombre = tds[0].innerText;
        let cedula = tds[1].innerText;
        let fecha = tds[6].innerText;
        // Asignar datos a ventana modal:
        document.querySelector('#id_estudiante').value = id;
        document.querySelector('#estudiante').value = nombre;
        document.querySelector('#cedula').value = cedula;
    });
    // Este evento es solo para probar, seguramente ya lo tienes activo
    btn.addEventListener('click', function() {
        document.querySelector('#modaleditar').style.display = 'block';
    });
});
<table id="tabla" class="table">
    <thead>
        <tr>
            <th class="text-center">Estudiante</th>
            <th class="text-center">Cédula</th>
            <th class="text-center">Carrera</th>
            <th class="text-center">Sección</th>
            <th class="text-center">Trayecto</th>
            <th class="text-center">Solicitud</th>
            <th class="text-center">Fecha</th>
            <th class="text-center">Status</th>
            <th class="text-center">Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">Nombre 1</td>
            <td class="text-center">Cédula 1</td>
            <td class="text-center">Carrera 1</td>
            <td class="text-center">Sección 1</td>
            <td class="text-center">Trayecto 1</td>
            <td class="text-center">Solicitud 1</td>
            <td class="text-center">08-jun/2020</td>
            <td class="text-center">Status 1</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="1" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
        <tr>
            <td class="text-center">Nombre 2</td>
            <td class="text-center">Cédula 2</td>
            <td class="text-center">Carrera 2</td>
            <td class="text-center">Sección 2</td>
            <td class="text-center">Trayecto 2</td>
            <td class="text-center">Solicitud 2</td>
            <td class="text-center">01-jun/2020</td>
            <td class="text-center">Status 2</td>
            <td class="text-center">
                <button class="btn btn-warning btn-sm" data-target="#modaleditar" data-toggle="tooltip" data-placement="left" data-id="2" title="Modificar Solicitud"><i class="pe-7s-note"></i></button>
            </td>
        </tr>
    </tbody>
</table>

<div id="modaleditar" style="display:none;">
    <input type="hidden" name="id_estudiante" id="id_estudiante">
    <input type="text" name="estudiante" id="estudiante" placeholder="Nombre y apellidos"><br>
    <input type="text" name="cedula" id="cedula" placeholder="Cédula">
</div>

No hay mucha diferencia si usas jQuery, pero probablemente debas colocar el javascript hasta abajo en la página o en una función onload (o similar) para asegurarte de que se ejecute hasta que se haya cargado todo el contenido (DOM).