jquery - 使用 jquery 将 HTML 表转换为 ul li

Question

我要转换HTML表到 ul和 li元素。我的表结构是

<table>
    <tbody>
        <tr>
            <th>1974</th>
            <td>UK</td>
        </tr>
        <tr>
                <th>1976</th>
            <td>Street</td>
        </tr>
        <tr>
            <th>1976-2002</th>
            <td>visitors.</td>
        </tr>

    </tbody> 
 </table>

我试图将其转换为

        <ul>
            <li>
                <p>1974</p>
                <p>UK</p>
            </li>
            <li>
                    <p>1976</p>
                <p>Street</p>
            </li>
            <li>
                <p>1976-2002</p>
                <p>visitors.</p>
            </li>

        </ul> 

使用 jquery replaceWith功能如下。这里我首先要转换<tbody>元素。

$(document).ready(function() {
    $("tbody").each(function(){
    var html = $(this).html();
    $(this).replaceWith("<ul>" + html + "</ul>");
    });
)};

但这并没有给出任何肯定的答案。任何人都知道如何执行此操作。

谢谢。

Answer 1

我会这样做:

$(document).ready(function() {
    var ul = $("<ul>");
    $("table tr").each(function(){
        var li = $("<li>")
        $("th, td", this).each(function(){
            var p = $("<p>").html(this.innerHTML);
            li.append(p);
        });
        ul.append(li);
    })    
    $("table").replaceWith(ul);    
});

首先创建 UL，然后用 UL 替换表。

演示:http://jsfiddle.net/yXyCk/