Come utilizzare l'attributo di classe in HTML COL
-
09-12-2019 - |
Domanda
Questo è il mio codice:
<html>
<style>
.left-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#1A5B71;
font-weight:bold;
text-align:right;
}
.right-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
text-align:left;
}
</style>
<body>
<table border="1">
<colgroup>
<col class="left-info" />
<col class="right-info" />
</colgroup>
<tr>
<td>3476896</td>
<td>My first HTML</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
</tr>
</table>
</body>
</html>
.
Ma, sta mostrando un tavolo semplice.Hai bisogno di aiuto !!
Soluzione
Guarda qui http://www.w3.org/tr/css21/tables.html#Colonne
È possibile impostare solo border
, background
, width
e visibility
con col
s
.
Modifica
Soluzione jQuery
Con questo piccolo snippet jquery è possibile copiare tutti i nomi di classe dai tag col
ai corrispondenti tag td
e
Funziona anche con Colspan in entrambi i tag col
AndiceDiceTagCodeGcode e con tavoli nidificati.
JavaScript
$(document).ready(function() {
var find_TDs_at_COL = function(table, col) {
var ret = [];
$(table).children('tbody').children('tr').each(function() {
var col2 = 0;
$(this).children('td,th').each(function() {
oldCol2 = col2;
if ($(this).attr('colspan')) {
col2 += parseInt($(this).attr('colspan'));
} else {
col2++;
}
if (oldCol2 <= col && col2 > col) {
ret.push(this);
}
})
})
return $(ret);
}
$('table > colgroup').each(function() {
var $table = $(this).parent();
var col = 0;
$(this).children('col').each(function() {
var oldCol = col
if ($(this).attr('colspan')) {
col += parseInt($(this).attr('colspan'))
} else {
col++;
}
for (var i = oldCol; i < col; i++) {
find_TDs_at_COL($table, i).addClass($(this).attr('class'))
}
})
})
})
.
console.clear()
$(document).ready(function() {
"use strict";
var find_TDs_at_COL = function(table, col) {
var ret = [];
$(table).children('tbody').children('tr').each(function() {
var col2 = 0;
$(this).children('td,th').each(function() {
var oldCol2 = col2;
if ($(this).attr('colspan')) {
col2 += parseInt($(this).attr('colspan'));
} else {
col2++;
}
if (oldCol2 <= col && col2 > col) {
ret.push(this);
}
})
})
return $(ret);
}
$('table > colgroup').each(function() {
var $table = $(this).parent();
var col = 0;
$(this).children('col').each(function() {
var oldCol = col
var that = this
if ($(this).attr('colspan')) {
col += parseInt($(this).attr('colspan'))
} else {
col++;
}
for (var i = oldCol; i < col; i++) {
find_TDs_at_COL($table, i)
.addClass($(this).attr('class'))
// copy style as well
// .each(function() {
// const [ ...style ] = that.style
// for ( let r of style ) {
// this.style[r] = that.style[r]
// }
//})
}
})
})
})
.
.left-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#1A5B71;
font-weight:bold;
text-align:right;
}
.right-info
{
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#00FFFF;
font-weight:bold;
text-align:left;
}
.extra-info {
font-size:14px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ff0000;
font-style: italic;
text-align:right;
}
.additional-info {
font-size:10px;
font-family:Tahoma, Helvetica, sans-serif;
color:#ffdd00;
}
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<colgroup>
<col class="left-info" />
<col class="right-info" />
<col class="extra-info" colspan="3"/>
<col class="additional-info"/>
<col />
</colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>C</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td></td>
<td>Extra</td>
<td>Yes</td>
<td>Add</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>Ugh</td>
<td colspan="2"></td>
<td>Don't trust</td>
</tr>
<tr>
<td>54379</td>
<td>My first JS</td>
<td colspan="2">Trust</td>
</tr>
</table>
.
Altri suggerimenti
Sebbene la risposta data qui sia di circa un anno a questo punto, ho pensato che avrei semplicemente sottolineato che puoi facilmente farlo con CSS molto semplice
Invece di cercare di dare la classe ad ogni TD nella sua colonna, puoi semplicemente indirizzarli come questo:
td:first-child{
color: #1A5B71;
text-align: right;
}
td:last-child{
color: #FFFFFF;
text-align: left;
}
.
Usando JavaScript per completare questa attività è completo Overkill
Ho scritto un piccolo script jQuery per questo che applica la classe ad ogni elemento th
e td
nella tabella colspan
s.
Provalo qui
JavaScript:
$(function () {
$('colgroup').each(function () {
var $colgroup = $(this)
var classes = $colgroup.children().map(function () { return $(this).attr('class') })
$colgroup.siblings().children('tr').each(function () {
var col = 0
$(this).children().each(function () {
var $child = $(this)
$child.addClass(classes[col])
col += parseInt($child.attr('colspan')) || 1
})
})
$colgroup.remove()
})
})
.
Lo script non è complicato, ma qui sono i passaggi:
- .
- per ogni
colgroup
- .
- cache i classnamames che i
col
s hanno - per ogni
tr
nella stessa tabella- .
- Imposta un var
col
in 0 - per ogni figlio di
tr
(th
s etd
s)- .
- Aggiungi una classe, selezionata con
col
- Incremento
col
per il suo attributocolspan
o 1 se non è presente, in modo che alla prossima iterazione, lo script sappia quale classe selezionare - Rimuovi del tutto
colgroup
, perché potresti, ad esempio, avere uno sfondo che non ha un'opacità di 1, che comporterebbe i tuoith
etd
s con uno sfondo con l'opacità sbagliata.I cache
$(this)
un paio di volte, perché è più veloce per cache gli oggetti jquery che chiamando$()
ogni volta che si desidera selezionare un elemento.
- Aggiungi una classe, selezionata con
- Imposta un var
- cache i classnamames che i