Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
566 views
in Technique[技术] by (71.8m points)

javascript - How to transform HTML table to list with JQuery?

How would I transform a table

<table>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Price</td>
    </tr>  
</table>

to a list of paragraphs with jQuery

<ul>
    <li>
        <p>Name</p>
        <p>Price</p>
    </li>
    <li>
        <p>Name</p>
        <p>Price</p>
    </li>  
</ul>

<p><a id="products-show-list">Toggle list view</a></p>

<script type="text/javascript">
    $("#products-show-list").click(function(){...});
</script>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
function convertToList(element) {
    var list = $("<ul/>");

    $(element).find("tr").each(function() {
        var p = $(this).children().map(function() {
            return "<p>" + $(this).html() + "</p>";
        });

        list.append("<li>" + $.makeArray(p).join("") + "</li>");
    });

    $(element).replaceWith(list);
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...