更新:
原帖中并没有明确提到作者需要处理深层嵌套的表格。我已经相应地
更新了他的JsFiddle。
以下是我写的一些jQuery代码,可以将表格实时转换为Bootstrap行和列。它假定表格是对称的,没有colspan或rowspan属性。
在将表格转换为Bootstrap布局时,主要问题之一是正确处理标题行。只要所有的标题单元格都使用th标签,这个jQuery代码就可以做到。你可以通过将
find('th')
替换为
find('th,td')
来轻松地假设第一行中的任何内容都是标题。
最后,重要的是保留原始表格的属性,如id、class和onclick事件。任何以编程方式添加的事件可能需要重新应用。
$('table:not(:has(table))').each(function() {
debugger;
var rowSelector = 'tr';
var attributes = $.map(this.attributes,function(a,i) {
return a.name+'="'+a.value+'"';
}).join(' ');
var $headers = $('tr:first', this).find('th');
var columns = $('tr:first',this).find('th,td').length;
if ($headers.length > 0) {
$headers.closest('tr').addClass('row visible-sm visible-md visible-lg');
$headers.addClass('form-group col-sm-' + Math.floor(12 / $headers.length)).wrapInner('<label></label>');
rowSelector = 'tr:not(:first)';
}
$(rowSelector, this).addClass('row').each(function() {
$('td,th', this)
.addClass('form-group col-sm-' + Math.floor(12 / columns))
.filter(function() {
return $headers.length > 1;
})
.each(function (i) {
$(this).prepend('<label class="visible-xs">' + $($headers[i]).html() + '</label>');
});
});
$(':input', this).addClass('form-control').css('width', '');
var divs = '<div class="container"><div '+attributes+'>'+$(this).html()
.replace(/<\/{0,1}tbody>/gi, '')
.replace(/<(tr|td|th)/gi, '<div')
.replace(/<\/(tr|td|th)/gi, '</div')+'</div></div>';
$(this).replaceWith(divs);
});
$('table').each(function() {
var rewrite = $(this).html()
.replace(/<(\/{0,1})table/gi, '<$1div')
.replace(/<\/{0,1}tbody>/gi, '')
.replace(/<(\/{0,1})(tr|td|th)/gi, '<$1div');
$(this).replaceWith( rewrite );
});
给定这个样例表格。
<table>
<tr><th>First Name</th><th>Last Name</th><th>Address</th><th>City</th><th>State</th><th>Zip Code</th></tr>
<tr><td>Jake</td><td>Elwood</td><td>1060 W Addison St</td><td>Chicago</td><td>IL</td><td>60613</td></tr>
<tr><td>John</td><td>Wayne</td><td>18601 Airport Way</td><td>Santa Ana</td><td>CA</td><td>92707</td></tr>
</table>
以下为Bootstrap标记的结果:
<div class="container">
<div class="row visible-md visible-lg">
<div class="form-group col-md-2">
<label>First Name</label>
</div>
<div class="form-group col-md-2">
<label>Last Name</label>
</div>
<div class="form-group col-md-2">
<label>Address</label>
</div>
<div class="form-group col-md-2">
<label>City</label>
</div>
<div class="form-group col-md-2">
<label>State</label>
</div>
<div class="form-group col-md-2">
<label>Zip Code</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
Jake
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Elwood
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
1060 W Addison St
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Chicago
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
IL
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
60613
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
John
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Wayne
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
18601 Airport Way
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Santa Ana
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
CA
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
92707
</div>
</div>
</div>