Como usar o atributo de classe em html col
-
09-12-2019 - |
Pergunta
Este é o meu código:
<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>
Mas está mostrando uma tabela simples.Preciso de ajuda !!
Solução
Olhe aqui
http://www.w3.org/TR/CSS21/tables.html#columns
Você só pode definir border
, background
, width
e visibility
com col
é
editar
solução jQuery
Com este pequeno trecho de jQuery você pode copiar todos os nomes de classes do col
tags para o correspondente td
Tag
Funciona mesmo com colspan em ambos col
e td
tags, bem como com tabelas aninhadas.
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>
Outras dicas
Embora a resposta dada aqui já tenha cerca de um ano, pensei em apenas salientar que você pode fazer isso facilmente com CSS muito simples
Em vez de tentar atribuir a classe a cada td em sua coluna, você pode simplesmente direcioná-los assim:
td:first-child{
color: #1A5B71;
text-align: right;
}
td:last-child{
color: #FFFFFF;
text-align: left;
}
Usar JavaScript para concluir esta tarefa é um exagero completo
Eu escrevi um pequeno script jQuery para isso que aplica a classe a todos th
e td
elemento no colspan
estábulo.
Experimente aqui
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()
})
})
O script não é complicado, mas aqui estão as etapas:
- Para cada
colgroup
- armazenar em cache os nomes de classe que o
col
depilar
- armazenar em cache os nomes de classe que o
- Para cada
tr
na mesma mesa- definir uma variável
col
para 0
- definir uma variável
- Para cada criança de
tr
(th
areiatd
e)- adicione uma classe, selecionada com
col
- incremento
col
por seucolspan
atributo ou 1 se não estiver presente, para que na próxima iteração o script saiba qual classe selecionar
- adicione uma classe, selecionada com
- Remova o
colgroup
completamente, porque você poderia, por exemplo, ter um fundo que não tenha uma opacidade de 1, o que resultaria em seuth
areiatd
está tendo um fundo com a opacidade errada.
eu cache $(this)
algumas vezes, porque é mais rápido armazenar objetos jQuery em cache do que chamar $()
toda vez que você quiser selecionar um elemento.