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#列
border
、background
、width
、visibility
、col
のみを設定できます。
編集
jQuery Solution
この小さなjQueryスニペットでは、col
タグから対応するtd
タグへのすべてのクラス名をコピーできます。
Colspanがcol
and td
タグとネストテーブルともでも機能します。
href="http://jsfiddle.net/herrserker/vvtyr/" rel="nofollow noreferrer">例ここでJSfiddle
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>
.
他のヒント
ここでの答えはこの時点で約1歳ですが、私はあなたが非常に単純なCSS で簡単にこれをすることができることを指摘したいと思ったと思いました。
その列のすべてのTDにクラスを与えようとする代わりに、あなたは単にこのようにそれらをターゲットにすることができます:
td:first-child{
color: #1A5B71;
text-align: right;
}
td:last-child{
color: #FFFFFF;
text-align: left;
}
.
JavaScriptを使用してこのタスクを完了するのは完全なオーバーキル
th
sテーブル内のtd
およびcolspan
要素にクラスを適用する小さなjQueryスクリプトを書きました。
ここでそれを試してください
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
sがを持っているクラス名をキャッシュする - 同じテーブル内の
tr
の場合- VAR
col
を0 に設定します。 -
tr
(th
sとtd
s)のすべての子に-
col
で選択したクラスを追加する -
col
属性でcolspan
を増やすか1存在しない場合は、次の反復で、スクリプトはを選択するクラスを知ることになります。 -
colgroup
を完全に削除すると、1の不透明度を持たないバックグラウンドを持つことができます。th
は、要素を選択するたびにtd
を呼び出すことよりもjQueryオブジェクトをキャッシュするのが速いので、数回キャッシュされます。
-
- VAR
-
所属していません StackOverflow