I am converting table structured data into div using below code.
$('#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"));
It works good mostly in all scenario except ROWSPAN & COLSPAN case.
How can I handle that design issue while converting Table into Div ? I am stuck in that.
I am converting table structured data into div using below code.
$('#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"));
It works good mostly in all scenario except ROWSPAN & COLSPAN case.
How can I handle that design issue while converting Table into Div ? I am stuck in that.
Share Improve this question edited Jul 12, 2012 at 10:41 BoltClock 725k165 gold badges1.4k silver badges1.4k bronze badges asked Jul 12, 2012 at 10:39 PriyankPriyank 1,17412 silver badges30 bronze badges 5-
1
I can't think of an easy automated method to do that. But why the hell are you want to display tabular data in a
DIV
-soup? Via JavaScript? Using regex to parse HTML! – feeela Commented Jul 12, 2012 at 10:46 - @feeela : Its a requirement to fit data properly into content so. – Priyank Commented Jul 12, 2012 at 10:48
-
Why are you converting a
table
todiv
s using JavaScript? – thirtydot Commented Jul 12, 2012 at 10:55 - @thirtydot: any other method wele if it gives a solution. – Priyank Commented Jul 12, 2012 at 11:06
- A solution to what problem? – thirtydot Commented Jul 12, 2012 at 11:07
2 Answers
Reset to default 6Maybe 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');
});
Why are you converting table structured data into div instead of just outputting div structured data in the first place? I don't really get that
You can try using 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;
}
Some example table which you should get:
<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>
In you case this will look like:
.replace(/rowspan="/gi, 'class="rowspanned cell')
This example works in all major browsers except for Internet Explorer 7.