Помощь с динамической таблицей

У меня есть недостаток обработки таблиц. Мне нужно показать данные из двух таблиц, которые у меня уже есть, хранящиеся в базе данных, первый-службы, он показывает существующие службы, и при нажатии на одну из этих служб мне нужно показать мне другую таблицу материалов, необходимых для выполнения этой службы, правда, я не знаю, как это сделать, я новичок в веб-программировании, я знаю, что это можно сделать с помощью ajax, но я не знаю, как, если кто-то может мне приведите пример, я думаю, что это могло бы исправить мою драму.

что-то похожее на это то, что я хочу получить:

здесь выбрано "стена 0,15" introducir la descripción de la imagen aquí

здесь выбран "керамический пол" introducir la descripción de la imagen aquí

Author: Diego Arce, 2018-10-20
Source

3 answers

Что вы можете сделать, так это, поскольку это динамический запрос на строку, присвоить значение в поле data <tr/>, которое вы собираетесь выбрать. Таким образом, когда вы выполняете запрос $.ajax(), Вы можете отправить значение, которое хотите отфильтровать.

Что-то вроде этого:

// Esta variable simula la respuesta de la llamada AJAX
const valoresAjax = {
  // Respuesta de la consulta enviando el parámetro codigo = 1
  "codigo1": [
    {
      "codigo": 5,
      "material": "Ladrillo común",
      "cantidad": "95 un",
      "precioUnitario": "574",
      "precio": "37.282"
    },
    {
      "codigo": 8,
      "material": "Cemento Portland",
      "cantidad": "11.8 kg",
      "precioUnitario": "960",
      "precio": "5.510"
    },
    {
      "codigo": 22,
      "material": "Cal Hidratada",
      "cantidad": "5.53 kg",
      "precioUnitario": "1.125",
      "precio": "6.221"
    },
    {
      "codigo": 3,
      "material": "Arena Lavada",
      "cantidad": "0.05 m3",
      "precioUnitario": "52.786",
      "precio": "2.639"
    },
  ],
  // Respuesta de la consulta enviando el parámetro codigo = 5
  "codigo5": [
    {
      "codigo": 5,
      "material": "Cerámica Esmaltada",
      "cantidad": "10",
      "precioUnitario": "30.000",
      "precio": "300.000"
    },
    {
      "codigo": 8,
      "material": "Agramassa",
      "cantidad": "50 kg",
      "precioUnitario": "32.000",
      "precio": "1.600.000"
    },
    {
      "codigo": 22,
      "material": "Pastina Klaukol",
      "cantidad": "12 kg",
      "precioUnitario": "10.000",
      "precio": "120.000"
    }
  ]
}
// Código HTML de tabla de detalle para creación dinámica
const tablaDetalleHTML = '<h3>Material por Cada Servicio</h3><table><thead><tr><th>Código</th><th>Material</th><th>Cantidad</th><th>Precio Unitario</th><th>Precio</th></tr></thead><tbody></tbody></table>';

$(document).ready(function(){
  $('.tablaPrincipal').on('click', 'tr', function(){
    // Obtener el valor del campo data-id de la fila
    // que recibe el evento click
    let paramId = $(this).data('id');
    
    // Este bloque representa la llamada AJAX
    /*$.ajax(
      url: url,
      data: {codigo: paramId},
      success: function(response){
      
        // Esta asignación está aquí como explicación de la asignación
        // de la variable response.
        let valoresAjax = {};
        valoresAjax[paramId] = response*/
        
        // Esta línea no es necesaria en la aplicación real
        // ya que valoresAjax[paramId] representa el response AJAX
        let response = valoresAjax[paramId];
        
        // Insertar el bloque HTML de tablaDetalle en el div.tablaDetalle
        $('.tablaDetalle').html($(tablaDetalleHTML));
        
        // La función map sirve para iterar los elementos de un arreglo
        response.map(f => {
          $('<tr><td>' + f.codigo + '</td><td>' + f.material + '</td><td>' + f.codigo + '</td><td>' + f.codigo + '</td><td>' + f.codigo + '</td></tr>').appendTo('.tablaDetalle tbody');
        });
      /*}
    )
    */
  });
});
body {
  font-family: "Arial", sans-serif;
}

table {
  border-collapse: collapse;
  background: #BFE5D0;
}

.tablaDetalle table {
  background: #C2E9F0;
}

table tr {
  border: solid 1px #74827B;
}

.tablaPrincipal tbody tr {
  cursor: pointer;
}

.tablaPrincipal tbody tr:hover {
  background: #7CAE92;
}

table td, table th {
  padding: 5px;
  border-right: solid 1px #A8B5DB;
}

table td:last-child, table th:last-child {
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Servicios</h3>
<table class="tablaPrincipal">
  <thead>
    <tr>
      <th>Código</th>
      <th>Servicio</th>
      <th>Dimensión</th>
      <th>Precio</th>
      <th>Eliminar</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="codigo1">
      <td>1</td>
      <td>Pared de 0,15m</td>
      <td>25 m2</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr data-id="codigo5">
      <td>1</td>
      <td>Piso de Cerámica</td>
      <td>10 m2</td>
      <td>25</td>
      <td></td>
    </tr>
</table>
<div class="tablaDetalle">
</div>
 1
Author: Niche, 2018-10-30 16:44:45

Очень хорошие Диего Арсе

Есть код, который я использую, который относится к полному, с тем, что вы ищете.

Все равно это поможет вам https://www.w3schools.com/sql/sql_join_inner.asp

Вы можете использовать его, используя PHP, AJAX и JAVASCRIPT одновременно

 1
Author: Ruben-PX, 2018-10-21 15:11:31

Я не знаю, является ли мой ответ очень грубым и неоптимальным, но, насколько я знаю, я думаю, что вы можете добавить <a href="#"></a> в запросы, где в # вы помещаете модальный, чтобы при нажатии на модальный выход таблицы, которая вам нужна, ну, по крайней мере, это то, как я думаю, что вы могли бы сделать, чтобы правда не была много AJAX или JAVASCRIPT.

 -1
Author: Rafael Gaitan, 2018-10-30 15:57:28