Convertir en tableau HTML ul li à l'aide de jquery

Je veux convertir HTML table à ul et li éléments. ma structure de la table est

<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>

J'ai essayé de convertir cette

        <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>

à l'aide de jquery replaceWith fonction comme ci-dessous. Ici, j'ai tout d'abord aller à convertir <tbody> élément.

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

mais ce n'est pas donner aucune réponse positive. Quelqu'un a une idée de comment faire cela.

Grâce.

<table> <ul> n'est pas valide balisage, il devrait être <table> <tr> <td> <ul></ul></td></tr></table>.
Désolé, C'est une erreur. en fait, je veux changer complètement de la table à la liste. j'ai mis à jour le code ci-dessus.

OriginalL'auteur Miuranga | 2013-02-12

Je voudrais faire comme ceci:

$(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 premier est créé, et que le tableau est remplacé par UL.

Démo: http://jsfiddle.net/yXyCk/

OriginalL'auteur Viktor S.

Essayer

$('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")
);

Code ci-dessus est testé et a travaillé pour moi..

Cheers

Il vous manque th. Seulement tds'sont remplacés par des p
yah bro merci je viens de mettre à jour ma réponse.. +1 pour u

OriginalL'auteur Dipesh Parmar

utiliser ce code

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

OriginalL'auteur

Le problème avec les autres réponses ici, c'est que tous les styles sont perdus lors de la conversion de la table à une liste. C'est ce que j'ai utilisé pour la réaliser et de maintenir l'apparence de la table:

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

Voir sur JSFiddle

OriginalL'auteur Mike

Convertir <table> structure de menu à <UL> à l'aide de jQuery

J'ai utilisé for boucle à la place si each pour une meilleure vitesse/performance

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