Come ridimensionare la larghezza delle colonne della tabella da JavaScript
-
03-07-2019 - |
Domanda
Ho un problema con JavaScript.
Ho un elenco di celle della tabella memorizzate su TabList.
Voglio trovare la larghezza massima e quindi impostare questa larghezza su tutti.
Un codice di esempio è qui, ma l'impostazione della larghezza non funziona.
var MaxTabWidth = 0;
for (var i = 0; i < TabList.length-1; i++)
{
if (TabList[i].offsetWidth>MaxTabWidth)
MaxTabWidth = TabList[i].offsetWidth;
}
for (var i = 0; i < TabList.length-1; i++)
{
TabList[i].style.width = MaxTabWidth+"px";
// TabList[i].width = MaxTabWidth+"px";
// TabList[i].offsetWidth = MaxTabWidth+"px";
}
Ho commentato i miei tentativi ..
Qualsiasi aiuto?
Questo
non ha fatto il trucco per me ..
Aggiornamento:
Sono sicuro che TabList è un elenco di celle perché stavo controllando className.
Sto eseguendo il ciclo continuo fino a TabList.length-1, perché voglio che l'ultima cella riempia il resto della larghezza della tabella.
Soluzione
Suggerirei di rimuovere tutti i CSS / styling dalla pagina e testarlo per isolare il problema. Cose come questa sono spesso complicate da CSS.
Altri suggerimenti
Se si imposta la larghezza dell'intera tabella su --i * MaxTabWidth. Distribuirebbe uniformemente le colonne? Supponiamo che la tua tabella sia denominata myTable.
document.getElementById('myTable').width = new String(--i*MaxTabWidth)
Modifica: inoltre non
for (var i = 0; i < TabList.length-1; i++)
salta l'ultima colonna fermandoti su TabList.length-2?
Per quello che vale, in jQuery questo può essere fatto con il seguente script in cui la tua tabella ha l'id di " myTable " ;. Se hai abbastanza controllo sull'ambiente da aggiungere in un framework, lo consiglio vivamente perché rende le attività come queste molto più facili.
var maxWidth = 0;
$("#myTable td").each(function() {
if ($(this).width() > maxWidth) {
maxWidth = $(this).width();
}
});
$("#myTable td").width(maxWidth);