HTML Col.でクラス属性を使用する方法

StackOverflow https://stackoverflow.com//questions/9623601

  •  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がcoland 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を使用してこのタスクを完了するのは完全なオーバーキル

thsテーブル内の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()
  })
})
.

スクリプトは複雑ではありませんが、ここではステップ：

  1. 毎回colgroup
    • colsがを持っているクラス名をキャッシュする
    • 同じテーブル内のtrの場合
      • VAR colを0 に設定します。
      • tr（thsとtds）のすべての子に
        • col で選択したクラスを追加する
        • col属性でcolspanを増やすか1存在しない場合は、次の反復で、スクリプトはを選択するクラスを知ることになります。
        • colgroupを完全に削除すると、1の不透明度を持たないバックグラウンドを持つことができます。

          thは、要素を選択するたびにtdを呼び出すことよりもjQueryオブジェクトをキャッシュするのが速いので、数回キャッシュされます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top