So verwenden Sie das Klassenattribut in der HTML-Spalte
-
09-12-2019 - |
Frage
Das ist mein Code:
<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>
Es wird jedoch eine einfache Tabelle angezeigt.Brauchen Sie Hilfe !!
Lösung
Schau hier
http://www.w3.org/TR/CSS21/tables.html#columns
Sie können nur einstellen border
, background
, width
Und visibility
mit col
S
bearbeiten
jQuery-Lösung
Mit diesem kleinen jQuery-Snippet können Sie alle Klassennamen aus kopieren col
Tags zu den entsprechenden td
Stichworte
Es funktioniert sogar mit Colspan in beiden col
Und td
Tags sowie mit verschachtelten Tabellen.
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>
Andere Tipps
Obwohl die Antwort hier an diesem Punkt etwa ein Jahr alt ist, dachte ich, ich würde nur darauf hinweisen, dass Sie dies einfach mit sehr einfachen CSS tun können
Anstatt zu versuchen, die Klasse an jedem TD in seiner Spalte anzugeben, können Sie sie einfach so anvisieren: generasacodicetagpre.
Verwenden von JavaScript, um diese Aufgabe abzuschließen, ist abgeschlossener Overkill
Ich habe dafür ein kleines jQuery-Skript geschrieben, das die Klasse auf alle anwendet th
Und td
Element in der colspan
s Tisch.
Probieren Sie es hier aus
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()
})
})
Das Skript ist nicht kompliziert, aber hier sind die Schritte:
- Für jeden
colgroup
- Cachen Sie die Klassennamen, die die
col
rasieren
- Cachen Sie die Klassennamen, die die
- Für jeden
tr
in derselben Tabelle- setze eine Variable
col
auf 0
- setze eine Variable
- Für jedes Kind von
tr
(th
s undtd
S)- Fügen Sie eine Klasse hinzu, ausgewählt mit
col
- Zuwachs
col
durch seinecolspan
Attribut oder 1, wenn es nicht vorhanden ist, sodass das Skript bei der nächsten Iteration weiß, welche Klasse es auswählen muss
- Fügen Sie eine Klasse hinzu, ausgewählt mit
- Entferne das
colgroup
insgesamt, weil Sie beispielsweise einen Hintergrund haben könnten, der keine Deckkraft von 1 hat, was zu Ihrem Ergebnis führen würdeth
s undtd
Es liegt an einem Hintergrund mit der falschen Deckkraft.
Ich speichere $(this)
ein paar Mal, da das Zwischenspeichern von jQuery-Objekten schneller ist als das Aufrufen $()
jedes Mal, wenn Sie ein Element auswählen möchten.