HTML 열에서 클래스 속성을 사용하는 방법

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 솔루션

이 작은 jQuery 스 니펫을 사용하면 col 태그에서 모든 클래스 이름을 해당 td 태그로 복사 할 수 있습니다
colAnd td 태그뿐만 아니라 중첩 테이블과 함께 콜 스파인에서도 작동합니다.

JSFiddle

자바 스크립트 

$(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를 사용하여 완전한 Overkill

나는 이를 위해 모든 클래스에 클래스를 적용하는 작은 jQuery 스크립트를 작성했습니다. th 그리고 td 요소 colspan안정적인.

여기에서 사용해 보세요

자바스크립트:

$(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
    • 클래스 이름을 캐시합니다. col가지고 있어요
  2. 모든 tr 같은 테이블에
    • 변수를 설정하다 col 0으로
  3. 모든 어린이에게 tr (th모래 td에스)
    • 다음으로 선택한 클래스를 추가하세요. col
    • 증가 col 그것으로 colspan 속성이 없거나 존재하지 않는 경우 1입니다. 그러면 다음 반복에서 스크립트가 어떤 클래스를 선택할지 알 수 있습니다.
  4. 제거 colgroup 예를 들어 불투명도가 1이 아닌 배경이 있을 수 있기 때문에 th모래 td배경의 불투명도가 잘못되었습니다.

나는 캐시한다 $(this) 호출하는 것보다 jQuery 객체를 캐시하는 것이 더 빠르기 때문입니다. $() 요소를 선택하려고 할 때마다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top