cols وcolgroups وcss :hover psuedoclass

Question

أحاول إنشاء جدول لعرض مؤشر كتلة الجسم للفرد.

كجزء من هذا، أود، على:hover، لـ <tr> و <col> (أو <colgroup>) ليتم تسليط الضوء عليها أيضًا، حتى يكون التقاطع أكثر وضوحًا.

نظرًا لأن الجدول سيحتوي على قياسات مترية وإمبريالية، فإن hover ليس من الضروري أن يتوقف عند الخلية (من أي اتجاه)، وسيكون في الواقع بمثابة مكافأة إذا امتد من محور إلى آخر.أنا أستخدم أيضًا XHTML 1.1 Strict doctype، إذا كان هذا يحدث فرقًا؟

لذا...مثال (الجدول الحقيقي...أكبر)، لكن هذا يجب أن يكون تمثيليًا:

<script>

tr:hover {background-color: #ffa; }

colgroup:hover,
col:hover {background-color: #ffa; }

</script>

...

<table>
    <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>

    <tr>
        <th></th>
        <th>50kg</th>
        <th>55kg</th>
        <th>60kg</th>
    </tr>

    <tr>
        <td>160cm</td>
        <td>20</td>
        <td>21</td>
        <td>23</td>
    </tr>

    <tr>
        <td>165cm</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
    </tr>

    <tr>
        <td>170cm</td>
        <td>17</td>
        <td>19</td>
        <td>21</td>
    </tr>

</table>

هل أطلب المستحيل، هل أحتاج إلى اللجوء إلى JQuery؟

Answer 1

إليك طريقة CSS خالصة لا تستخدم Javascript.

إستعملت ::before و ::after عناصر زائفة لتمييز الصف والعمود. z-index يحافظ على التمييز أسفل <tds> في حال كنت بحاجة إلى التعامل مع أحداث النقر. position: absolute يسمح لهم بمغادرة حدود <td>. overflow: hidden على ال <table> يخفي تجاوز تسليط الضوء.

لم يكن ذلك ضروريًا، ولكنني جعلته أيضًا يحدد الصف أو العمود فقط عندما تكون في الرؤوس.ال .row و .col الطبقات تعتني بهذا.إذا كنت ترغب في التبسيط، يمكنك إزالتها.

يعمل هذا في جميع المتصفحات الحديثة (ويتحلل بشكل جيد على المتصفحات القديمة من خلال عدم القيام بأي شيء).

العرض التوضيحي: http://jsfiddle.net/ThinkingStiff/rUhCa/

انتاج:

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

لغة البرمجة:

<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

Answer 2

هناك مكون إضافي جيد جدًا لـ jQuery صادفته تقع هنا والذي يقوم بعمل جيد جدًا في هذا النوع من الأشياء مع الكثير من الأمثلة.بشكل تفضيلي سأستخدم ذلك.

Answer 3

AFAIK CSS يحوم فوق TRلا يتم دعمها في IE على أي حال، لذلك في أفضل الأحوال، سيعمل جزء TR من ذلك في Firefox فقط.

لم أر حتى أ :hover العمل على col/colgroup لذا لست متأكدًا مما إذا كان ذلك ممكنًا ...

أعتقد أنك قد تكون عالقًا في تطبيق Javascript.

هناك مثال هنا هذا يعمل (الصفوف والكول) في Firefox ولكن مرة أخرى مكسورة في IE ...كولز لا تعمل.

Answer 4

لقد صادفت هذه الطريقة الرائعة للقيام بذلك css-tricks.com لقد قمت أيضًا بإعداد كمان أثناء العبث به، لا شيء خيالي ولكن يمكنك الحصول على الفكرة باستخدام نفس الكود الذي توفره صفحة خدعة css تلك

// أتش تي أم أل

<table>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
</table>

// شبيبة

$(function(){
    $("table").delegate('td','mouseover mouseleave', function(e) {
        if (e.type == 'mouseover') {
          $(this).parent().addClass("hover");
          $("colgroup").eq($(this).index()).addClass("hover");
        }
        else {
          $(this).parent().removeClass("hover");
          $("colgroup").eq($(this).index()).removeClass("hover");
        }
    });
})

تحقق من الكمان هنا

Answer 5

الجواب المباشر(https://jsfiddle.net/craig1123/d7105gLf/)

توجد بالفعل إجابات CSS وJQuery؛ومع ذلك، فقد كتبت إجابة جافا سكريبت نقية بسيطة.

أجد أولا كل col و td العلامات، احصل على فهرس العمود لكل خلية عن طريق القيام بذلك element.cellIndex, ، ثم قم بإضافة فئة CSS مع الخلفية mouseenter وإزالته على mouseleave.

لغة البرمجة

<table id='table'>
  <col />
  <col />
  <col />
  <col />
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Birthdate</th>
      <th>Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Abraham Lincoln</td>
      <td>204</td>
      <td>February 12</td>
      <td>Stovepipe</td>
    </tr>
    <tr>
      <td>Winston Churchill</td>
      <td>139</td>
      <td>November 30</td>
      <td>Homburg</td>
    </tr>
    <tr>
      <td>Rob Glazebrook</td>
      <td>32</td>
      <td>August 6</td>
      <td>Flat Cap</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}
table th {
  text-align: left;
}
table tr, table col {
  transition: all .3s;
}
table tbody tr:hover {
  background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
  background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
  transition: all .3s;
}
tbody tr:hover {
  background-color: rgba(0,140,203,.2);
}
col.hover {
  background-color: rgba(0,140,203,.2);
}

شبيبة

const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');

const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');

for (const cell of td) {
    const index = cell.cellIndex;
    cell.addEventListener('mouseenter', columnEnter.bind(this, index));
    cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}

هنا كمان