我正在使用以下代码将表结构化数据转换为div。
$('#content').html($('#content').html()
.replace(/<tbody/gi, "<div id='table'")
.replace(/<tr/gi, "<div style='overflow:auto;padding-top:15px;'")
.replace(/<\/tr>/gi, "</div>")
.replace(/<td/gi, "<span style='float:left;margin-right:20px;'")
.replace(/<\/td>/gi, "</span>")
.replace(/<\/tbody/gi, "<\/div"));
除了ROWSPAN&amp; COLSPAN案例。
如何在将表转换为Div时处理该设计问题? 我被困在那里。
答案 0 :(得分:5)
也许这会让你朝着正确的方向前进:
.replace(/rowspan="/gi, 'class="rowspan-')
.replace(/colspan="/gi, 'class="colspan-')
然后为类创建样式(例如rowspan-2或colspan-3等)。但是,这并不能解决一个元素同时具有row-and colspan的情况,但这只是一个开始。
更好的方法是:
var copyAttr = function(old, $new) {
for(var i = 0,
attributes = old.attributes;
i < attributes.length; i++) {
$new.attr(attributes[i].name, attributes[i].value);
}
return $new;
}
$('#content').find('tbody').each(function() {
var $new = copyAttr(this, $('<div id="table"></div>');
$(this).replaceWith($new);
}).end().find('tr').each(function() {
var $new = copyAttr(this, $('<div class="tr"></div>');
$(this).replaceWith($new);
}).end().find('td').each(function() {
var $new = copyAttr(this, $('<span class="td"></span>');
$(this).replaceWith($new);
});
所以现在你用div和span替换了整个表结构,其中包含了table元素的所有属性。接下来,您可以将row-and colspan属性更改为类。
$('#table .td').each(function() {
var $t = $(this);
$t
.addClass('rowspan-'+$t.attr('rowspan'))
.removeAttr('rowspan')
.addClass('colspan-'+$t.attr('colspan'))
.removeAttr('colspan');
});
答案 1 :(得分:1)
为什么要将表结构化数据转换为div而不是仅仅输出div结构化数据?我真的不明白
您可以尝试使用CSS:
.tablewrapper
{
position: relative;
}
.table
{
display: table;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
border: 1px solid red;
padding: 1em;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned
{
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
您应该获得的一些示例表:
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell">
Top left
</div>
<div class="rowspanned cell">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell">
Bottom left
</div>
<div class="empty cell"></div>
<div class="cell">
Bottom right
</div>
</div>
</div>
</div>
在你的情况下,这将是:
.replace(/rowspan="/gi, 'class="rowspanned cell')
此示例适用于除Internet Explorer 7之外的所有主流浏览器。