使用jQuery将表格转换为div并将其附加到每个td的前面 [英] Use jQuery to convert table to div's and append th in front of each td
本文介绍了使用jQuery将表格转换为div并将其附加到每个td的前面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将所有表转换为div,并添加每个转换为div的td的th html或th的内容.
I am trying to convert all tables to divs and add the th html or contents of the th in from of each td that is converted to a div.
所以我的桌子看起来像这样:
So my table would look like this:
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>
我想将其转换为这样:
<div class="box">
<div class="row-fname"><span class="fname-label">TH Data</span> : <span class="fname-data">Data 1</span></div>
<div class="row-lname"><span class="lname-label">TH Data</span> : <span class="lname-data">Data 2</span></div>
<div class="row-address"><span class="address-label">TH Data</span> : <span class="address-data">Data 3</span></div>
<div class="row-city"><span class="city-label">TH Data</span> : <span class="city-data">Data 4</span></div>
<div class="row-state"><span class="state-label">TH Data</span> : <span class="state-data">Data 5</span></div>
我发现这段代码几乎可以用,但是可以弄清楚如果有任何代码,如何将其获取并在每个td的数据跨度之前添加它们.
I found this code that almost works but can figure out how to make it get the th if there are any th's and add them before each td's data span.
$('.content table').replaceWith(function() {
var html = '';
$('tr', this).each(function() {
html += '<div class="box grey-bg">';
$('th, td', this).each(function() {
html += '<span>' + $(this).html() + '</span>';
});
html += '</div>';
});
return '<div class="">' + html + '</div>';
});
任何帮助将不胜感激!
推荐答案
这有效:
$('.content table').replaceWith(function() {
var $th = $(this).find('th'); // get headers
var th = $th.map(function() {
return $(this).text();
}).get(); // and their values
$th.closest('tr').remove(); // then remove them
var $d = $('<div>', { 'class': 'box' });
$('tr', this).each(function(i, el) {
var $div = $('<div>', {'class': 'inner'}).appendTo($d);
$('td', this).each(function(j, el) {
var n = j + 1;
var $row = $('<div>', {
'class': 'row-' + n
});
$row.append(
$('<span>', {
'class': 'label-' + n,
text: th[j]
}), ' : ', $('<span>', {
'class': 'data-' + n,
text: $(this).text()
})).appendTo($div);
});
});
return $d;
});
演示在 http://jsfiddle.net/alnitak/UK395/
这篇关于使用jQuery将表格转换为div并将其附加到每个td的前面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文