在將「Table」轉換爲「Div」時處理rowspan和colspan

我使用下面的代碼將表結構化數據轉換爲div。在將「Table」轉換爲「Div」時處理rowspan和colspan

$('#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"));

它的工作原理主要是好除了ROWSPAN & COLSPAN情況下，所有的場景。

在將Table轉換爲Div時，如何處理該設計問題？我困在那。

來源

2012-07-12 Priyank

我想不出一個簡單的自動化方法來做到這一點。但爲什麼你要在DIV'湯中顯示錶格數據呢？通過JavaScript？ [使用正則表達式來解析HTML！]（http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#answer-1732454） – feeela 2012-07-12 10:46:26

@feeela：它的要求以便將數據正確地適用於內容。 – Priyank 2012-07-12 10:48:27

爲什麼使用JavaScript將'table'轉換爲'div's？ – thirtydot 2012-07-12 10:55:56

也許這可以讓你在正確的方向：

.replace(/rowspan="/gi, 'class="rowspan-') 
.replace(/colspan="/gi, 'class="colspan-')

然後做出類樣式（例如行跨度-2或合併單元格-3等）。然而，這並不能解決一個元素同時具有行和colspan的情況，但這只是一個開始。

一個更好的辦法是：

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); 
});

所以，現在你已經更換了整個表結構的div，並與所有的屬性表元素有跨越。接下來，您可以將row-和colspan屬性更改爲類。

$('#table .td').each(function() { 
    var $t = $(this); 
    $t 
    .addClass('rowspan-'+$t.attr('rowspan')) 
    .removeAttr('rowspan') 
    .addClass('colspan-'+$t.attr('colspan')) 
    .removeAttr('colspan'); 
});

來源

2012-07-12 10:46:37 Simon

+1爲你的第二個例子 – feeela 2012-07-12 10:54:45

第二個肯定是要走的路..不要分析。使用選擇器。 – techfoobar 2012-07-12 10:55:13

爲什麼要將表格結構化數據轉換爲div而不是僅僅輸出div結構化數據？我真的不拿到

您可以嘗試使用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; 
}

一些示例表，你應該得到：

<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>

在你的情況下，這將是這樣的：

.replace(/rowspan="/gi, 'class="rowspanned cell')

本示例適用於除Internet Explorer 7以外的所有主流瀏覽器。

來源

2012-07-12 10:56:40 RTB

我的朋友我無法強迫用戶以特定格式輸入。我必須做我所擁有的一切。 – Priyank 2012-07-12 11:04:37

在將「Table」轉換爲「Div」時處理rowspan和colspan

回答

相關問題