How to transform HTML table to list with JQuery?

Question

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>

Don't have an answer for you, but I am curious why you would do this? — E.J. Brennan
– E.J. Brennan, Commented Feb 23, 2009 at 13:53
Yeah, this seems like an odd thing to do. Can you explain your context? Does StackOverflow post some random pointless questions to get page views up? — hunter
– hunter, Commented Feb 24, 2009 at 1:22
Plenty of reasons why someone would want to do this -- e.g., in mobile view, you might want the contents of the table to populate a dropdown menu. I know this is supposed to be a tough crowd, but no one can foresee every possible coding scenario, no matter how high your SO reputation. — jimiayler
– jimiayler, Commented Mar 2, 2015 at 18:45

Alex Barrett · Accepted Answer · 2009-02-23 14:41:06Z

11

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

answered Feb 23, 2009 at 14:41

Alex Barrett

16.5k4 gold badges54 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crescent Fresh Over a year ago

I like this better than @cletus' answer as it doesn't presume how many <td> -> <p> conversions to do.

cletus · Accepted Answer · 2009-02-23 13:57:33Z

2

You could try:

function convertToList() {
  var list = $("<ul></ul>");
  $("table tr").each(function() {
    var children = $(this).children();
    list.append("<li><p>" + children[0].text() + "</p><p>" + children[1] + "</p></li>");
  }
  $("table").replaceWith(list);
}

answered Feb 23, 2009 at 13:57

cletus

627k169 gold badges922 silver badges945 bronze badges

Comments

greenerist · Accepted Answer · 2009-09-10 21:30:39Z

0

This still has some work left, but this is what I got to work so far:

<script>
$(function(){
 t2l("uglytable");
});

function t2l(divname)
{ 
 var ulist  = $("<ul></ul>");
 var table  = "div." + divname + " table";
 var tr   = "div." + divname + " table tr";

 $(tr).each(function(){
  var child = $(this).children();
  ulist.append("<li>" + child.text() + "</li>");
 });
 $(table).replaceWith(ulist);
}

</script>

<div class="uglytable">
  <table border="1">
   <tr>
    <td>lakers</td>
   </tr>
   <tr>
    <td>dodgers</td>
   </tr>
   <tr>
    <td>angels</td>
   </tr>
   <tr>
    <td>chargers</td>
   </tr>
  </table>
 </div>

answered Sep 10, 2009 at 21:30

greenerist

Comments

greenerist · Accepted Answer · 2009-09-10 17:30:08Z

-1

I can see this being useful in SharePoint which likes to use a bunch of nested tables to render a simple list which is more efficient using ,

...

answered Sep 10, 2009 at 17:30

greenerist

Collectives™ on Stack Overflow

How to transform HTML table to list with JQuery?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related