コンテンツをtdデータラベル属性に引き出します

私は、小さな画面サイズでは折りたたまれ、各セルの前に表のヘッダーを表示するレスポンシブテーブルスタイルを使用しています。コンテンツをtdデータラベル属性に引き出します

HTML：

<table> 
    <caption>Statement Summary</caption> 
    <thead> 
    <tr> 
     <th scope="col">Account</th> 
     <th scope="col">Estimated arrival date</th> 
     <th scope="col">Amount</th> 
     <th scope="col">Period</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-label="Account">Visa - 3412</td> 
     <td data-label="Really freaking long div magic">04/01/2016</td> 
     <td data-label="Amount">$1,190</td> 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
    </tr> 
    <tr> 
     <td scope="row" data-label="Account">Visa - 6076</td> 
     <td data-label="Due Date">03/01/2016</td> 
     <td data-label="Amount">$2,443</td> 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
    </tr> 
    <tr> 
     <td scope="row" data-label="Account">Corporate AMEX</td> 
     <td data-label="Due Date">03/01/2016</td> 
     <td data-label="Amount">$1,181</td> 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
    </tr> 
</tbody> 
</table>

CSS：

body { 
    font-family: "Open Sans", sans-serif; 
    line-height: 1.25; 
} 
table { 
    border: 1px solid #ccc; 
    border-collapse: collapse; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    table-layout: fixed; 
} 
table caption { 
    font-size: 1.5em; 
    margin: .5em 0 .75em; 
} 
table tr { 
    background: #f8f8f8; 
    border: 1px solid #ddd; 
    padding: .35em; 
} 
table th, 
table td { 
    padding: .625em; 
    text-align: center; 
} 
table th { 
    font-size: .85em; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
} 
@media screen and (max-width: 600px) { 
    table { 
    border: 0; 
    } 
    table caption { 
    font-size: 1.3em; 
    } 
    table thead { 
    border: none; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    color: red; 
    background-color:#000; 
    } 
    table tr { 
    border-bottom: 3px solid #ddd; 
    display: block; 
    margin-bottom: .625em; 
    } 
    table td { 
    border-bottom: 1px solid #ddd; 
    display: block; 
    font-size: .8em; 
    text-align: right; 
    } 
    table td:before { 
    /* 
    * aria-label has no advantage, it won't be read inside a table 
    content: attr(aria-label); 
    */ 
    content: attr(data-label); 
    float: left; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 
    table td:last-child { 
    border-bottom: 0; 
    } 
    table td:first-child{ 
    color:white; 
    background: #000; 
    } 
}

列ヘッダは、各対応するテーブルセルにデータラベルの属性を使用して表されています。 CSSでは、content：attr（data-label）という名前で呼び出されます。私はこのスタイルをいくつかのかなり大きなテーブルに適用しており、HTML内のすべての単一セルにデータラベルを書く必要はありません。 Javascriptを使用してデータラベル属性にthを引き込む方法はありますか？

出典

2017-11-03 kfievel

あなたは、テーブルには、このから行きたいですか：これ？：

----------- 
Account: 1234 
Estimated Arrival Date: 03/15/2001 
Amount: $1.00 
Period: 3rd 
----------- 
Account: 1235 
Estimated Arrival Date: 04/21/2002 
Amount: $12.00 
Period: 4th 
----------- 
Account: 4594 
Estimated Arrival Date: 11/11/2011 
Amount: $45.00 
Period: 2nd 
-----------

に

| Account | Estimated arrival date | Amount | Period | | ------- | ---------------------- | ------ | ------ | | 1234 | 03/15/2001 | $1.00 | 3rd | | 1235 | 04/21/2002 | $12.00 | 4th | | 4594 | 11/11/2011 | $45.00 | 2nd |

UPDATE は、このコードを試してみてください：使用

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Table Flipping</title> 
    <style> 
    .table { 
     border-collapse: collapse; 
     display: inline-table; 
    } 

    .tr { 
     display: table-row; 
    } 

    .th, .td { 
     display: table-cell; 
     border: 1px solid #555; 
     padding: 3px 6px; 
    } 

    .th { 
     background-color: #ddd; 
     font-weight: bold; 
     text-align: center; 
    } 

    .td { 
     text-align: right; 
    } 

    .my-table.show-thin { 
     display: block; 
    } 

    .show-thin .tr { 
     border-bottom: 1px solid black; 
     display: block; 
     margin-bottom: 2px; 
     padding-bottom: 2px; 
    } 

    .show-thin .td { 
     border: none; 
     display: block; 
     padding: 0; 
     text-align: left; 
    } 

    .show-thin .td:before { 
     content: attr(title) ':'; 
     display: inline-block; 
     font-weight: bold; 
     padding-right: 5px; 
    } 

    .show-thin .thin-hide { 
     display: none; 
    } 
    </style> 
    <script> 
    function toggle() { 
     var table = document.querySelector('.my-table'); 
     table.classList.toggle('show-thin'); 
    } 
    </script> 
    </head> 
    <body> 
    <button onclick="toggle()">Toggle</button> 
    <hr/> 
    <div class="my-table"> 
     <div class="tr thin-hide"> 
     <span class="th">Account</span> 
     <span class="th">Estimated arrival date</span> 
     <span class="th">Amount</span> 
     <span class="th">Period</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">1234</span> 
     <span class="td" title="Estimated Arrival Date">03/15/2001</span> 
     <span class="td" title="Amount">$1.00</span> 
     <span class="td" title="Period">3rd</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">1235</span> 
     <span class="td" title="Estimated Arrival Date">04/21/2002</span> 
     <span class="td" title="Amount">$12.00</span> 
     <span class="td" title="Period">4th</span> 
     </div> 
     <div class="tr"> 
     <span class="td" title="Account">4594</span> 
     <span class="td" title="Estimated Arrival Date">11/11/2011</span> 
     <span class="td" title="Amount">$45.50</span> 
     <span class="td" title="Period">2nd</span> 
     </div> 
    </div> 
    </body> 
</html>

私の例値を表形式から行に変更するクラスdフォーマット。しかし、それは同様にメディアクエリを使用して行うことができます。これはデモが簡単だった。

すべてのセルにtitleアトリビュートを設定するのは難しいことです。その後、シンモードでCSSを使用してtitleを表示します。

この

は、表がワイドモード

でどのように見えるかを示しており、これはそれが薄いモード

の中にどのようなものであるかを示します

2つの画像を見ると、標準の表形式では、最初の作業に「到着予定日」という用語が使用されています。薄いバージョンでは、 "Estimated Arrival Date"が使用され、すべての単語が大文字になります。これは、値が別の場所から来たことを示すためです。

ワイドモードでは、ヘッダーはここから来ている：

<div class="tr thin-hide"> 
    <span class="th">Account</span> 
    <span class="th">Estimated arrival date</span> 
    <span class="th">Amount</span> 
    <span class="th">Period</span> 
</div>

とシンモードではtitle属性から来ています。

あなたが<table>、<tr>、<th>と<td>タグを使用しようとする場合、これは動作しません。

出典

2017-11-03 19:50:08 Intervalia

はい、そうです。 – kfievel

あなたのニーズに合ったコードをいくつか含むようにコードを変更しました。 – Intervalia

主な問題は、この応答スタイルをかなり大きなデータテーブルに適用したいからです。HTMLに入り、各セルのデータラベルまたはタイトル属性を設定する必要はありません。だから私は、適用可能なすべてののの内容に基づいてその属性を設定するためにJavascriptを使用したいと思っています。 – kfievel

コンテンツをtdデータラベル属性に引き出します

答えて

関連する問題