0

私は KendoUI Grid を使用していますが、これは優れていますが、モバイル デバイスではうまく反応しないため、このレスポンシブ データ テーブルのアイデアを実装しようとしています。基本的にヘッダーを非表示にし、すべてのセルを display:block にしてスタックし、td の左側に偽のヘッダーを作成しtd:before{content:"td header title"}ます。

唯一のことは、これは未知の広告フィールドを持つ多くの異なるテーブルに適用されるため、私にはできません

td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
etc

理想的には、ヘッダー列のタイトルを TD に適用して、レンダリングされるようにします<td data-title="headerTitle">data</td>。次に、CSS で次のことができます。

td:before { content: attr(data-title); }

それは完全に機能しますが、それが可能かどうかはわかりません。他の誰かが他のアイデアを持っているかもしれません。

JSフィドルリンク

元：<td data-title="name">Jane</td>

編集: jQuery ソリューションを使用するようです:

function tableResizer() {
    var headerTitleArray = [];

    // create array of table header titles
    $('.k-grid-header-wrap th').each(function () {
        headerTitleArray.push($(this).attr('data-title'));
    });

    // append tables headers to each td
    $('.k-grid-content tr').each(function () {
        $(this).find('td').each(function (i) {
            if (typeof headerTitleArray[i] !== 'undefined') { // some headers don't have a title
                $(this).prepend('<span class="td-title">' + headerTitleArray[i] + '</span>');
            }
        });
    });
}
4

1 に答える 1

2

たとえば、javascriptでそれを行うべきだと思います：

$("td").each(function() {
    $(this).prepend("<span class='before'>" + $(this).data('title') + "</span>");
});

beforeそしてあなたのようにスタイルされたクラスでtd:before...

このフィドルを参照してください：http://jsfiddle.net/TpJyu/4/

于 2013-04-18T20:52:45.830 に答える