0

我有类似于这个简化版本的表格：

<table>
    <thead>
        <tr><th></th>
            <th>1st sg.</th><th>2nd</th><th>3rd...</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>Present</th>
            <td>sum</td><td>es</td><td>est...</td>
        </tr>
        <tr><th>Perfect</th>
            <td>fui</td><td>fuisti</td><td>fuit...</td>
        </tr>
    </tbody>
</table>

而且它们确实变得相当宽。所以我display: block所有的表格元素，除了tad，即display:none语义UI样式。

效果很好。但我仍然希望来自的内容ths仍然thead引人注目。

我想使用 jQuery 并动态添加一个名为color的属性data-col，正如在此JsFiddle中所看到的那样。

动态创建的代码将类似于以下内容：

<tbody>
    <tr>
        <th>Present</th>
        <td data-col="1st sg.">sum</td>
        <td data-col="2nd">es</td>
        <td data-col="3rd">est</td>
    </tr>
</tbody>

所以我的技术问题如下：

如何动态地从 tad 的 th 元素中获取内容，并将所述内容作为属性分发到同一列的所有 td？

其他解决方案也值得赞赏！

4

1 回答 1

1

这是一个javascript函数。看看这是否有帮助

    function td_col()
    {
        var table = $('table');
        table.find('tbody tr').each(function(){
            $(this).find('td').each(function(i){ 
               $(this).attr('data-col', table.find('thead tr th:eq('+(i + 1)+')').html());
            })
        })
    }

CSS 更新：

        @media(max-width:470px) {
        td:before {
            float:right;
            content:attr(data-col); //Removed the brackets.
        }
    }

小提琴

于 2014-09-12T07:27:49.237 回答