Question

我正在尝试将所有表格转换为 divs, 并从转换为 div 的每 td 中添加 tth html 或 Th 的内容。

所以我的桌子看起来是这样的:

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

我发现这个代码几乎有效,但可以找出如何让它得到它,如果有任何ths 并在每个 td 数据跨越之前添加它们。

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

任何帮助都会非常感激!

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 = $( <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://jsfidd.net/alnitak/UK395/" rel="nreferrer" >http://jsfiddle.net/alnitak/UK395/

Answer 2

以下是我的即兴表演:)

在每个 data-name 标签上添加标签,以区分字段的名称 :

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

UPDATE. 如果您无法将额外的 data 属性添加到 lt;th> 标签上, 不会有大问题。对于非硬编码, 我们可以将名称移动到数组( 如下), 并代之以使用。

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

<强力 > DEMO: http://jsfiddle.net/BsUVA/1/

友情链接