4

以下のコードを使用して、テーブル構造化データを div に変換しています。

$('#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 に変換する際に、その設計上の問題をどのように処理できますか? 私はそれに行き詰まっています。

4

2 に答える 2

6

多分これはあなたを正しい方向に導きます：

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

次に、クラスのスタイルを作成します (rowspan-2 や colspan-3 など)。ただし、これは 1 つの要素に row- と 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-12T10:46:37.693 に答える
3

そもそもdiv構造データをそのまま出力するのではなく、なぜtable構造データを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-12T10:56:40.473 に答える