使用jQuery錶轉換爲div的，並在每個TD

我想所有錶轉換爲申報單，並從被轉換成一個div每個TD的加個HTML或次內容跟前追加日。使用jQuery錶轉換爲div的，並在每個TD

所以，我的表是這樣的：

<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的數據跨度之前獲得th值並添加它們。

$('.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>'; 
});

任何幫助將非常感謝！

來源

2012-05-23 Aaron

你爲什麼不只是使用的div來開始？ – nmford

當用於表格*數據時，

沒有任何問題。否則，請參考** nmford **的評論。 –

我需要在小於320像素的屏幕上轉換一張我無法調整（動態cms驅動）的表格，並且所有響應表格解決方案都不是一種選項。我知道我知道很奇怪的請求，但我真的很感激任何人誰可以幫助我:) – Aaron

回答

這工作：

$('.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/

來源

2012-05-23 22:40:24 Alnitak

非常好！如果我不知道有多少列或名字會怎麼樣呢？也許讓它增加數字？ – Aaron

@Aaron是的，這可以工作 - '.each'回調中的值'i'是當前的列號，所以你可以使用它來代替'titles [i]'。 – Alnitak

如果你用td添加更多tr，它不會在前面添加標題。只將它添加到第一個。任何想法，這也是一個很棒的解決方案！ – Aaron

這裏是我的即興:)

添加data-name標籤給每個<th>爲了區分字段的名稱：

<table> 
    <tr> 
     <th data-name="fname">Title 1</th> 
     <th data-name="lname">Title 2</th> 
     <th data-name="address">Title 3</th> 
     <th data-name="city">Title 4</th> 
     <th data-name="state">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>

並嘗試下面的代碼。至少你會得到你需要的結構。

$("table").replaceWith(function() { 
    var block = $("<div />").addClass("box"); 
    $("tr:first th", this).each(function() { 
     var name = $(this).data("name"); 
     var spanLabel = $("<span />").addClass(name + "-label").html(this.innerHTML); 
     var spanData = $("<span />").addClass(name + "-data"); 
     $("<div />").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; 
});

DEMO：http://jsfiddle.net/BsUVA/

更新。如果您無法將額外的data屬性添加到<th>標籤，則不存在大問題。對於不硬編碼，我們可以將名稱移動到數組中（如下所示）並使用它。

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

DEMO：http://jsfiddle.net/BsUVA/1/

來源

2012-05-23 22:08:36 VisioN

這是如此令人難以置信的令人敬畏，但遺憾的是我無法將數據名稱添加到th。該表是由cms動態生成的，並且是一個標準的簡潔通用表。 :( – Aaron

哦，但謝謝soooo多快速反應和幫助!!!你ROCK VisioN !!! – Aaron

@Aaron有沒有問題，你可以使用數組名稱然後。檢查更新！ – VisioN

相關問題