0
225
ViewsColumna de grupo con el mismo nombre de subtítulo en la tabla de datos usando Javascript/jQuery
yo tengo una mesa asi
En el cual tengo diferentes ciudades donde tenemos demanda-oferta de diferentes productos.
Ahora, lo que quiero aquí es que la demanda es diferente para todos los productos. Sin embargo, la oferta es la misma en los tres productos, por lo que quiero que la tabla se vea de esta manera.
Lo que quiero hacer es solo mostrar la columna de suministro una vez en la última de la tabla. Esto tiene que hacerse dinámicamente ya que en el futuro tenemos múltiples productos.
Puede alguien ayudarme con esto?
·
Juan Pablo Isaza
1 answers
Answer question0
Lo que hace el siguiente código es:
- Identifique las posiciones de los "Suministros" y guárdelos en una matriz
ind, en este caso será[3, 5, 7] - Recorre
indexcepto el último elemento7(ya que quedará un "Suministro") y oculta todos lostd's;$("td:nth-child("3"),$("td:nth-child("5") - A las "Demandas" que preceden a cada uno de estos elementos se les asignarán dos espacios.
let ind = []; $("td:contains('Supply')").each(function (index) { ind.push($(this).index() + 1); }); $(".hide").on("click", function () { for (let i = 0; i < ind.length - 1; i++) { let el = $("td:nth-child(" + ind[i] + ")"); el.prev().attr("colspan", "2"); el.hide(); } }); table, th, td { border: 1px solid black; border-collapse: collapse; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>City</th> <th colspan="2">Product 1</th> <th colspan="2">Product 2</th> <th colspan="2">Product 3</th> </tr> <tr> <td></td> <td>Demand</td> <td>Supply</td> <td>Demand</td> <td>Supply</td> <td>Demand</td> <td>Supply</td> </tr> <tr> <td>City 1</td> <td>50$</td> <td>60$</td> <td>90$</td> <td>60$</td> <td>100$</td> <td>60$</td> </tr> <tr> <td>City 2</td> <td>50$</td> <td>60$</td> <td>90$</td> <td>60$</td> <td>100$</td> <td>60$</td> </tr> <tr> <td>City 3</td> <td>50$</td> <td>60$</td> <td>90$</td> <td>60$</td> <td>100$</td> <td>60$</td> </tr> <tr> <td>City 4</td> <td>50$</td> <td>60$</td> <td>90$</td> <td>60$</td> <td>100$</td> <td>60$</td> </tr> </table> <button class="hide">Hide</button>
·
Juan Pablo Isaza
Report
Answer question