Convert HTML table to ul li using jquery

Convert HTML table to ul li using jquery  #angularjs #reactjs

  • UL first is created, and than table is replaced with UL.
  • @FAngel yah bro thanx i just updated my answer..
  • I want to convert HTML table to ul and li elements.
  • The problem with the other answers is that all of the styles are lost when converting the table to a list.
  • actually I want completely change table to list.

The problem with the other answers here is that all of the styles are lost when converting the table to a list. This is what I used to accomplish it and maintain the table look:

@ng_real_ninja: Convert HTML table to ul li using jquery #angularjs #reactjs

$(‘table’).replaceWith( $(‘table’).html() .replace(/

/gi, “

“) .replace(/

/gi, “

“) .replace(/

/gi, “

“) .replace(/<\/tbody/gi, "<\/ul") ); Above code is tested and worked for me.. use this code function convertToList(element) { var list = $(“

    “); $(element).find(“tr”).each(function() { var p = $(this).children().map(function() { return “

    ” + $(this).html() + “

    “; }); list.append(“

  • ” + $.makeArray(p).join(“”) + “
  • “); }); $(element).replaceWith(list); }

    The problem with the other answers here is that all of the styles are lost when converting the table to a list. This is what I used to accomplish it and maintain the table look:

    function convert_table_to_list($table) { var $list = $(“

      “); $list.css(“list-style-type”, “none”); $list.css(“padding”, 0); $table.find(“tr”).each(function() { var $li = $(“

    • “); $li.height($(this).height()); $(this).find(“td”).each(function() { var $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; }

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

    • “+getAnchor+”
    • “); //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(“+“); }

    Convert HTML table to ul li using jquery

    You might also like More from author

    Comments are closed, but trackbacks and pingbacks are open.