如何在html col中使用class属性

Posted

技术标签:

【中文标题】如何在html col中使用class属性【英文标题】：How to use class attribute in html col 【发布时间】：2012-03-26 06:52:53 【问题描述】：

这是我的代码：

<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>

但是，它显示的是简单的表格。需要帮助！！

【问题讨论】：

你想要这个吗，jsfiddle.net/5Fpc7 见***.com/questions/6982254/… @SheikhHeera，但我不需要再次重复类名，我只需要提及一次。 @sql_query 是的，我也是！但我们并不走运。它不支持您（和我）可能认为的方式 现在怎么办，解决了吗？ 【参考方案1】：

看这里http://www.w3.org/TR/CSS21/tables.html#columns

您只能将border、background、width 和visibility 设置为cols

编辑

jQuery 解决方案

使用这个小 jQuery sn-p，您可以将所有类名从 col 标签复制到相应的 td 标签 它甚至适用于 col 和 td 标记中的 colspan 以及嵌套表。

Example here as 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>

VanillaJS 解决方案


  "use strict";
  
  document.addEventListener('DOMContentLoaded', e => 
    Array.from(document.querySelectorAll('table > colgroup')).forEach(cg => 
      const table = cg.parentElement
      let col = 0
      Array.from(cg.querySelectorAll(':scope > col')).forEach(c => 
        const oldCol = col
        if (c.getAttribute('colspan')) 
          col += +c.getAttribute('colspan')
         else 
          col++
        
        for (let i = oldCol; i < col; i++) 
          find_TDs_at_COL(table, i).forEach(el => 
            Array.from(c.classList).forEach(c => el.classList.add(c))
          )
        
      )
    )
  )

  const find_TDs_at_COL = (table, col) => 
    let ret = [];
    Array.from(table.querySelectorAll(':scope > tbody > tr')).forEach(tr => 
      let col2 = 0
      Array.from(tr.querySelectorAll(':scope > td, :scope > th')).forEach(tc => 
        const oldCol2 = col2
        if (tc.getAttribute('colspan')) 
          col2 += +tc.getAttribute('colspan')
         else 
          col2++
        
        if (oldCol2 <= col && col2 > col) 
          ret.push(tc);
        
      )
    )
    return ret
    
  
  

.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:24px;
    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;
  


.shadow 
  text-shadow: 2px 2px 0 black

.info 
  text-decoration: overline;

<table border="1">
    <colgroup>
      <col class="left-info" />
      <col class="right-info shadow 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>

<br><hr><br>


<table border="1">
    <colgroup>
      <col class="right-info" />
      <col class="left-info" />
      <col class="additional-info"/>
      <col class="extra-info shadow" colspan="3"/>
      <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>

【讨论】：

【参考方案2】：

虽然这里给出的答案在这一点上大约有一年的历史，但我想我只是指出你可以使用非常简单的 CSS 轻松做到这一点

您可以像这样简单地定位它们，而不是尝试将类赋予其列中的每个 td：

td:first-child
    color: #1A5B71;
    text-align: right;


td:last-child
    color: #FFFFFF;
    text-align: left;

使用 JavaScript 来完成这个任务完全是大材小用

【讨论】：

这不能回答 OP 问题。 OP 想在cols 上使用类。顺便说一句，您的解决方案应该如何处理未知数量的列？ 我只是提供了比您的效率高出数倍的 OP 知识。 您的 解决方案应如何处理未知数量的列？我看不出我的解决方案怎么不如你的动态。 你必须有所作为。您的样式表不知道列数，但表格的来源不知道。 应用 CSS 而不是 HTML 有什么问题吗？您必须明确说明在这两种语言中要影响哪些列。除了使用的语言之外，实际上没有区别 此表始终有可能来自外部来源，这是您无法控制的。只需映像两个外部源，它们会生成两个不同的表，例如第一个巫三柱，第二个有五个。您必须为此进行 HTML 分析。我在客户端用我的 JS 做 HTML 分析。【参考方案3】：

我为此编写了一个小的 jQuery 脚本，它将类应用于colspans 表中的每个th 和td 元素。

Try it here

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 缓存cols 拥有的类名 对于同一个表中的每个tr 将 var col 设置为 0 对于tr 的每个孩子（ths 和tds） 添加一个类，用col 选择 通过其colspan 属性增加col，如果不存在则增加1，以便在下一次迭代中，脚本将知道要选择哪个类 完全删除colgroup，因为例如，您可能有一个不透明度不为1 的背景，这将导致您的ths 和tds 有一个错误的背景不透明度。

我缓存$(this) 几次，因为缓存 jQuery 对象比每次选择元素时调用$() 更快。

【讨论】：

以上是关于如何在html col中使用class属性的主要内容，如果未能解决你的问题，请参考以下文章

如何将“.row class”或“.col class”转换为写入css/less boostrap的独特类？

我不知道如何在 Javascript 工具包框架中处理 select HTML Class 属性

如何使用 C# 关键字作为属性名称？

[HTML问题] 标签中的class如何理解？

如何利用Vue.js库绑定HTML标签内的class属性值

如何使用 Razor 编写 HTML 行？