使用jQuery将表转换为div并将其追加到每个td的前面

我试图将所有表转换为div并添加th html或从每个转换为div的td的内容。

所以我的表看起来像这样：

 
 
Title 1
 
Title 2
 
Title 3
 
Title 4
 
Title 5
 
 
 
Data 1
 
Data 2
 
Data 3
 
Data 4
 
Data 5
 
  

我想转换它所以它是这样的：

 
 
TH Data : Data 1
 
TH Data : Data 2
 
TH Data : Data 3
 
TH Data : Data 4
 
TH Data : Data 5 

我发现这个代码几乎可以工作，但可以弄清楚如果有任何问题，如何使它得到th并在每个td的数据跨度之前添加它们。

 $('.content table').replaceWith(function() { var html = ''; $('tr', this).each(function() { html += '
'; $('th, td', this).each(function() { html += '' + $(this).html() + ''; }); html += '
'; }); return '
' + html + '
'; }); 

任何帮助都会非常感激！

Answer 1

这有效：

 $('.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 = $('
', { 'class': 'box' }); $('tr', this).each(function(i, el) { var $div = $('
', {'class': 'inner'}).appendTo($d); $('td', this).each(function(j, el) { var n = j + 1; var $row = $('
', { 'class': 'row-' + n }); $row.append( $('', { 'class': 'label-' + n, text: th[j] }), ' : ', $('', { 'class': 'data-' + n, text: $(this).text() })).appendTo($div); }); }); return $d; }); 

演示http://jsfiddle.net/alnitak/UK395/

Answer 2

这是我的即兴创作:)

为每个

添加data-name标签，以区分字段的名称：

 
 
 
Title 1
 
Title 2
 
Title 3
 
Title 4
 
Title 5
 
 
 
Data 1
 
Data 2
 
Data 3
 
Data 4
 
Data 5
 
 
​ 

并尝试下面的代码。 至少你会得到你需要的结构。

 $("table").replaceWith(function() { var block = $("
").addClass("box"); $("tr:first th", this).each(function() { var name = $(this).data("name"); var spanLabel = $("").addClass(name + "-label").html(this.innerHTML); var spanData = $("").addClass(name + "-data"); $("
").addClass("row-" + name).append(spanLabel, " : ", spanData).appendTo(block); }); $("tr:last td", this).each(function(index) { block.children("div:eq(" + index + ")").children(":last").html(this.innerHTML); }); return block; }); 

演示： http ： //jsfiddle.net/BsUVA/

---

UPDATE。 如果您无法向

标记添加额外的data属性，则不会出现大问题。 对于非硬编码，我们可以将名称移动到数组（如下所示）并改为使用它。

 var names = [ "fname", "lname", "address", "city", "state" ]; 

演示： http ： //jsfiddle.net/BsUVA/1/