Question

我想将下表转换为无序列表： （这篇文章没有给出确切的结果：How to transform HTML table to list with JQuery?）

我试过这样的话：

     <script type="text/javascript">

        $(document).ready(function(){

            var list = $("<ul/>");
            var table  = "div." + 'productTable' + " table";
            $(table).find("tr").each(function() {
            var p = $(this).children().map(function() {
            return "<p>" + $(this).html() + "</p>";
            });

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

            $(table).replaceWith(list);

        });
    </script> 


<div class="productTable">
    <table cellspacing="2" cellpadding="2" border="0">
    <tr>
    <td colspan="2"><br>
    <a href="">back to shop by all brands</a>
    </td>
    </tr>
    <tr>
    <td colspan="2"><a href="">back to "P" brands</a></td>
    </tr>
    <tr><td colspan="2"><h1>Paris</h1></td></tr><tr><td valign="top">
    <table cellpadding="1" cellspacing="2" border="0">
    <tr><td valign="top"><img src="" border="0"></td>
    <td></td></tr>
    </table>
    </td>
    </tr>
    <tr><td style="background: #80826C;color: white;text-align:center;font-weight:bold" width="100%">
    Click a department below to see more products from this brand</td></tr>
    </table>
    <table cellspacing="2" cellpadding="2" border="0" width="100%" bgcolor="#e7e7e2">
    <tr><td valign="top"><a href="">Sleds, Skates & Toboggans</a></td>
    <td><img src="img/shim.gif" border="0" width="10" height="1"></td></table>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr><td><img src="img/shim.gif" width="1" height="10" border="0"></td></tr>
    <tr><td style="background: #80826C;color: white;text-align:center;font-weight:bold" width="100%">A few of our products from this brand</td></tr>
    <tr><td><img src="img/shim.gif" width="1" height="10" border="0"></td></tr>
    <tr><td><table><tr><td valign="top" align="center" width="155"><a href="">
    <img src="" border="0" alt="Paris Standard Child Back Pad for E-32 Sled" title="Paris Standard Child Back Pad for E-32 Sled"></a><br>
    <a href="">Paris Standard Child Back Pad for E-32 Sled</a><br>
    <img src="img/shim.gif" width="1" height="19" border="0"><strong>Price:</strong> <strong>$29.99</strong></td><td></td><td></td></tr></table></td></tr></table>
    <table cellspacing="2" cellpadding="2" border="0" width="100%"><tr><td colspan="2"><br><br><a href="">back to "P" brands</a></td></tr>
    <tr><td colspan="2"><br><a href="">back to shop by all brands</a>
    </td></tr>
    </table>
</div>

Answer 1

    $(document).ready(function () {
                $('table').each(function () {
                    var list = $("<ul/>");

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

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

                    $(this).replaceWith(list);
                });
            });


//Or 



        $(document).ready(function () {
            $('div.productTable table').each(function () {
                var list = $("<ul/>");

                $(this).find("tr").each(function () {
                    var p = $(this).children().map(function () {
                        if ($(this).find('table').length > 0) {
                            var subList = $("<ul/>");

                            var sP = $(this).find('table').children().map(function () {
                                return "<p>" + $(this).html() + "</p>";
                            });

                            subList.append("<li>" + $.makeArray(sP).join("") + "</li>");

                            return $('<div />').append($('<p />').append(subList)).html();
                        }
                        else {
                            return "<p>" + $(this).html() + "</p>";
                        }
                    });

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

                $(this).replaceWith(list);
            });
        });

如何使用jquery将html表转换为列表？

1 个答案: