gpt4 book ai didi

jquery - 响应表 : show thead elements' content in corresponding tds

转载 作者:太空宇宙 更新时间:2023-11-04 12:56:23 25 4
gpt4 key购买 nike

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

<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 所有表格元素,除了 thead 是 display:none, Semantic UI style .

按原样工作得很好。但我仍然希望 theadths 中的内容仍然引人注目。

我想到了使用 jQuery 并动态添加一个名为 coldata-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>

所以我的技术问题如下:

如何动态获取thead的第th个元素的内容,并将所述内容作为属性分发给同一列的所有tds?

其他解决方案也很受欢迎!

最佳答案

这是一个 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.
}
}

Fiddle

关于jquery - 响应表 : show thead elements' content in corresponding tds,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25802776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com