我有一个 SharePoint 表 table#layoutsTable
那是自动生成的。我可以用 div.row
包裹整个表格元素。我正在尝试将单个类添加到 td
带有 columns
的元素+ .large-#
基于单元格宽度属性的元素。这是压缩的 html 标记:
<span id="DeltaPlaceHolderMain">
...
<div class="row">
<table id="layoutsTable" style="width: 100%;">
<tbody>
<tr style="vertical-align: top;>
<td style="width: 66.6%;">
...
</td>
<td style="width: 33.3%;">
...
</td>
</tr>
</tbody>
</table>
</div>
...
</span>
<div class="row">
元素已经用 jquery 手动包装到标记中,并尝试将类添加到此代码段中的单个单元格:
$(document).ready(function(){
$('table#layoutsTable').wrap('<div class="row">'); //operates properly
$('table#layoutsTable td').each(function(){
var width = $(this).css('width');
console.log(width);
if(width === '66.6%'){
$(this).addClass('large-8 columns');
}
if(width === '33.3%'){
$(this).addClass('large-4 columns');
}
});
});
另一种方法(尽管响应性的选择有限)是简单地将这些响应类添加到单元格本身。但是,这不是首选。
最佳答案
我不会用 div 包裹 td。它违背了拥有表结构的目的。只需将类添加到 td 即可。
$(this).addClass("large-8 columns");
关于JQuery 用响应式 Div 包装表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35463523/