Handle rowspan and colspan while converting "Table" into "Div"

css, html, javascript, jquery

Solution

Maybe this gets you in the right direction:

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

Then make styles for the classes (e.g. rowspan-2 or colspan-3 etc.). However, this doesn't solve cases where one element has both row- and colspan, but it's a start.

A better way would be:

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);
});

So now you have replaced the whole table structure with divs and spans with all the attributes the table elements had. Next you can change the row- and colspan attributes to classes.

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

Problem

Original source

Related problems

• RegEx match open tags except XHTML self-contained tags