使用 jquery 将 HTML 表转换为 ul li答案

【问题标题】：Convert HTML table to ul li using jquery使用 jquery 将 HTML 表转换为 ul li
【发布时间】：2013-01-27 13:05:46
【问题描述】：

我想将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>");
    });
)};

但这并没有给出任何肯定的答案。任何人都知道如何做到这一点。

谢谢。

【问题讨论】：

<table> <ul> 不是一个有效的标记，它应该是 <table> <tr> <td> <ul></ul></td></tr></table>。
对不起，这是错误的。实际上我想完全改变表格来列出。我已经更新了上面的代码。

标签： jquery html html-lists html-table

【解决方案1】：

试试

$('table').replaceWith( $('table').html()
   .replace(/<tbody/gi, "<ul id='table'")
   .replace(/<tr/gi, "<li")
   .replace(/<\/tr>/gi, "</li>")
   .replace(/<td/gi, "<p")
   .replace(/<\/td>/gi, "</p>")
   .replace(/<th/gi, "<p")
   .replace(/<\/th>/gi, "</p>")
   .replace(/<\/tbody/gi, "<\/ul")
);

以上代码已经过测试并为我工作..
干杯

【讨论】：

你错过了。只有td 被替换为 p

【解决方案2】：

我会这样做：

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

【讨论】：

【解决方案3】：

使用此代码

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

【讨论】：

【解决方案4】：

这里其他答案的问题是，将表格转换为列表时，所有样式都会丢失。这是我用来完成它并保持表格外观的：

function convert_table_to_list($table) {
    var $list = $("<ul></ul>");
    $list.css("list-style-type", "none");
    $list.css("padding", 0);

    $table.find("tr").each(function() {
        var $li = $("<li></li>");

        $li.height($(this).height());
        $(this).find("td").each(function() {
            var $div = $("<div></div>");

            // Add inline and external styling
            var style = css($(this));
            $div.css(style);

            // Add some browser default styles
            $div.css("display", "table-cell");
            $div.html($(this).html());
            $div.width($(this).width());
            $div.height($(this).height());
            $div.css("vertical-align", $(this).css("vertical-align"));
            $div.css("padding", $(this).css("padding"));

            // Add class(es)
            $div.addClass($(this).attr("class"));

            // Append to li
            $li.append($div);
        });
        // Append li to ul
        $list.append($li);
    });

    $list.insertAfter($table);
    $table.remove();

    return $list;
}

// The following are taken from http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element
function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}
function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

查看JSFiddle

【讨论】：

【解决方案5】：

使用jQuery将<table>结构菜单转换为<UL>

我使用for 循环代替each 以获得更好的速度/性能

   for(var i=0; i<$anchorTarget.length; i++){
            var $eachAnchor = $anchorTarget.eq(i);
            //get anchor markup from table
            var getAnchor = $eachAnchor.parent().html();
            //append anchor on created ul
            $("."+convertedMenuCls).append("<li>"+getAnchor+"</li>");
            //hide old icon - if you've icon as a image in old table markup
            $eachAnchor.parent().parent().find("img").hide();
            //Add new icon
            $eachAnchor.parent().parent().find("img").after("<span>+</span>");
        }

表结构

UL 结构 转换后

这是工作代码： Convert Table structure menu to UL using jQuery

【讨论】：