Comment utiliser l'attribut de classe dans le col HTML

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

  •  09-12-2019
  •  | 
  •  

Question

Voici mon code :

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

Mais il montre un tableau simple.Besoin d'aide !!

Était-ce utile?

La solution

Regardez ici
http://www.w3.org/TR/CSS21/tables.html#columns

Vous pouvez uniquement définir border, background, width et visibility avec cols

modifier

Solution jQuery

Avec ce petit extrait de code jQuery, vous pouvez copier tous les noms de classes du col balises aux correspondants td Mots clés
Cela fonctionne même avec Colspan dans les deux cas colet td balises ainsi qu’avec des tables imbriquées.

Exemple ici en tant que 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>

Autres conseils

Bien que la réponse donnée ici a environ un an à ce stade, je pensais que je voudrais simplement souligner que vous pouvez facilement faire cela avec des CSS très simples

Au lieu d'essayer de donner la classe à chaque TD dans sa colonne, vous pouvez simplement les cibler comme ceci: 

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

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

Utilisation JavaScript pour terminer cette tâche est complète Overkill

J'ai écrit un petit script jQuery pour cela qui applique la classe à chaque th et td élément dans le colspanécurie.

Essayez-le ici

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()
  })
})

Le script n'est pas compliqué, mais voici les étapes :

  1. Pour chaque colgroup
    • cache les noms de classe que le colraser
  2. Pour chaque tr dans le même tableau
    • définir une variable col à 0
  3. Pour chaque enfant de tr (thsable tds)
    • ajouter une classe, sélectionnée avec col
    • incrément col par son colspan attribut ou 1 s'il n'est pas présent, afin qu'à la prochaine itération, le script sache quelle classe sélectionner
  4. Retirer le colgroup car vous pourriez, par exemple, avoir un arrière-plan qui n'aurait pas une opacité de 1, ce qui entraînerait votre thsable tdc'est avoir un arrière-plan avec une mauvaise opacité.

je cache $(this) plusieurs fois, car il est plus rapide de mettre en cache des objets jQuery que d'appeler $() chaque fois que vous souhaitez sélectionner un élément.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top