كيفية استخدام سمة الفئة في هتمل كول

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

يمكنك فقط تعيين border, background, width و visibility مع cols

تحرير

حل مسج

مع هذا المقتطف مسج قليلا يمكنك نسخ كافة أسماء الفئة من col العلامات إلى المقابلة td العلامات
إنه يعمل حتى مع كولسبان في كليهما colو td العلامات وكذلك مع الجداول المتداخلة.

مثال هنا كما جسفيدل

جافا سكريبت

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

نصائح أخرى

على الرغم من أن الإجابة المقدمة هنا حوالي عام في هذه المرحلة، فقد اعتقدت أنني أوجه فقط أنه يمكنك القيام بذلك بسهولة مع CSS بسيطة للغاية

بدلا من محاولة إعطاء الفصل إلى كل TD في عموده، يمكنك ببساطة استهدافهم مثل هذا: giveacodicetagpre.

باستخدام JavaScript لإكمال هذه المهمة مكتملة المبالغة

لقد كتبت سيناريو مسج صغير لهذا ينطبق على الطبقة إلى كل 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) بضع مرات ، لأنه أسرع لتخزين الكائنات مسج من الدعوة $() في كل مرة تريد تحديد عنصر.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top