javascript - 在将 "Table"转换为 "Div"时处理 rowspan 和 colspan

Question

我正在使用以下代码将表格结构化数据转换为 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 和 COLSPAN 情况外，它在大多数情况下都能正常工作。

在将 Table 转换为 Div 时如何处理该设计问题？我深陷其中。

Answer 1

也许这会让您朝着正确的方向前进:

.replace(/rowspan="/gi, 'class="rowspan-')
.replace(/colspan="/gi, 'class="colspan-')

然后为类制作样式(例如 rowspan-2 或 colspan-3 等)。但是，这并不能解决一个元素同时具有 row- 和 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 以及表格元素具有的所有属性。接下来，您可以将 row- 和 colspan 属性更改为类。

$('#table .td').each(function() {
  var $t = $(this);
  $t
    .addClass('rowspan-'+$t.attr('rowspan'))
    .removeAttr('rowspan')
    .addClass('colspan-'+$t.attr('colspan'))
    .removeAttr('colspan');
});