如何将HTML表格与jQuery名单？ [英] How to transform HTML table to list with JQuery?

问题描述

我将如何变换表

 ＆LT;表＆gt;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;名称和LT; / TD＆GT;
        ＆LT; TD＆GT;价格＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;名称和LT; / TD＆GT;
        ＆LT; TD＆GT;价格＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

段落的使用jQuery列表

 ＆LT; UL＆GT;
    ＆LT;立GT;
        ＆LT; P＆GT;名称和LT; / P＆GT;
        ＆LT; P＆GT;价格＆LT; / P＆GT;
    ＆LT; /李＆GT;
    ＆LT;立GT;
        ＆LT; P＆GT;名称和LT; / P＆GT;
        ＆LT; P＆GT;价格＆LT; / P＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; P＆GT;＆LT;一个ID =展示产品列表＆GT;切换列表视图＆LT; / A＆GT;＆LT; / P＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
    $（＃展示产品清单）点击（函数（）{...}）。
＆LT; / SCRIPT＆GT;
 

解决方案

 函数convertToList（元素）{
    VAR名单= $（＆LT; UL /＆gt;中）;    $（元素）.find（TR）。每个（函数（）{
        变种P = $（本）。儿童（）。图（函数（）{
            返回＆LT; P＆gt;中+ $（本）。html的（）+＆LT; / P＆gt;中;
        }）;        list.append（＆LT;立GT;+ $ .makeArray（P）。加入（）+＆LT; /李＆GT;）;
    }）;    $（元素）.replaceWith（名单）;
}
 

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>

解决方案

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

这篇关于如何将HTML表格与jQuery名单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！