Как использовать атрибут class в html col
-
09-12-2019 - |
Вопрос
Это мой код:
<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>
Но, это показывает простую таблицу.Нужна помощь!!
Решение
Посмотри сюда
http://www.w3.org/TR/CSS21/tables.html#columns
Вы можете только установить border
, background
, width
и visibility
с col
s
Редактировать
Решение jQuery
С помощью этого небольшого фрагмента jQuery вы можете скопировать все имена классов из col
теги к соответствующему td
Теги
Это работает даже с colspan в обоих col
и td
теги, а также с вложенными таблицами.
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>
Другие советы
Несмотря на то, что ответ, приведенный вот около года в этот момент, я подумал, что просто укажу, что вы можете легко сделать это с очень простыми CSS
вместо того, чтобы пытаться дать класс каждому TD в его столбце, вы можете просто нацелиться на них так:
td:first-child{
color: #1A5B71;
text-align: right;
}
td:last-child{
color: #FFFFFF;
text-align: left;
}
.
Использование JavaScript для завершения этой задачи является полным переплетом
Для этого я написал небольшой скрипт jQuery, который применяет класс к каждому th
и td
элемент в colspan
s стол.
Попробуйте это здесь
язык 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()
})
})
Сценарий несложный, но вот необходимые шаги:
- Для каждого
colgroup
- кэшируйте имена классов, которые
col
у них есть
- кэшируйте имена классов, которые
- Для каждого
tr
в той же таблице- установите переменную
col
до 0
- установите переменную
- Для каждого ребенка из
tr
(th
ы иtd
ы)- добавьте класс, выбранный с помощью
col
- прирост
col
по своемуcolspan
атрибут или 1, если он отсутствует, чтобы на следующей итерации скрипт знал, какой класс выбрать
- добавьте класс, выбранный с помощью
- Удалите
colgroup
в целом, потому что у вас мог бы, например, быть фон, у которого непрозрачность не равна 1, что привело бы к вашемуth
ы иtd
у него фон с неправильной непрозрачностью.
Я кэширую $(this)
пару раз, потому что кэшировать объекты jQuery быстрее, чем вызывать $()
каждый раз, когда вы хотите выбрать какой-либо элемент.