0
208
ViewsExcepto por la última columna del país, oculte todas las columnas cuyo nombre de encabezado comience con el país usando Javascript/jQuery
Esta es una tabla donde necesito eliminar columnas duplicadas de País. Quiero hacer esto dinámicamente. Como si tengo más de tres columnas de país, por ejemplo, se ocultará automáticamente cuando haya más de una columna de país. T
<table> <tr> <th>Company</th> <th>Contact</th> <th>Contact</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> La salida debería ser así: 
¿Alguien puede ayudarme con esto, soy nuevo en la codificación?
·
Juan Pablo Isaza
2 answers
Answer question0
Esto los esconde:
let col = []; let res = []; let ind = []; $("th").each(function () { col.push($(this).text()); }); res = [...new Set(col)]; for (let i = 0; i < col.length; i++) { if (col.indexOf(res[i]) !== -1) { ind.push(col.indexOf(res[i]) + 1); } } let diff = Array.from({ length: col.length }, (_, i) => i + 1).filter((x) => !ind.includes(x)); $(".hide").on("click", function () { for (let i = 0; i < diff.length; i++) { $("th:nth-child(" + diff[i] + ")").hide(); $("td:nth-child(" + diff[i] + ")").hide(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>Company</th> <th>Contact</th> <th>Contact</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button class="hide">Hide</button>
·
Juan Pablo Isaza
Report
0
Ahí lo tienes, aquí hay una solución usando solo css. Note: This is not a global solution, it should work just for your case. Otherwise it needs to be tweeked a little bit for more flexibility.
body { font-family: system-ui, sans-serif; } table { border: 1px solid gray; width: 100%; table-layout: fixed; } table th, table td { padding: .5em .75em; text-align: left; cursor: default; } table th { background-color: #c4c4c4; } table tr:nth-child(2n+3) td { background-color: #eee; } table tr th:nth-child(2), table tr td:nth-child(2), table tr th:nth-child(3), table tr td:nth-child(3){ display: none; } <table cellspacing="0" cellpadding="0" border="0"> <tr> <th>Company</th> <th>Contact</th> <th>Contact</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>
·
Juan Pablo Isaza
Report
Answer question