I have a requirement to remove the use of tables and replace the code with HTML lists (<ul> and <li>). The HTML code to be replaced is as below

            <table>  
                <tr><td>John Smith</td></tr>  
                <tr><td>24 years</td></tr>  
                <tr><td>Chicago</td></tr>  
            </table>  

How to replace the above code with (<ul> <li>)

Hey I got a solution for this, see the below code..

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

Can Anyone explain this how it works

I'm not a pro at javascript, but it would seem that it just takes the elements table and returns that as a ul, and then it takes the li and turns that into an array(list). And then just replaces the whole code and turns it into a list. var list = $("<ul/>"); takes the table function and spits out the ul (this).children() gets the child function in this care the tr and the td, and then the return"<p>" takes it out of the tr and td, then the list.append(...) turns the code into an array and attaches an li tag to the code. Then the $(this).replaceWith(list); takes the whole this, The table, and replaces it with the list.

I'm assuming that this is some sort of excersice, because what comes to mind is why not just update the HTML before its served to the user agent.

Why would you need JavaScript for this? As JorgeM says, just change the HTML.

From a semantic standpoint, why would you change this table into a <ul> or <ol>? Each row provides separate details about a person, while items in a list should be similar in taxonomy to one another, such as

  • Person 1
  • Person 2
  • Person 3

If you had to use lists, I'd use a Definition List:

<dl>
    <dt>John Smith</dt>
    <dd>24 years</dd>
    <dd>Chicago</dd>

    <dt>...</dt>
    <dd>...</dd>
    <dd>...</dd>
 </dl>

Why do you wish to do this???

Tables are for presenting data and that is what yours seems to be doing. It is NOT a list. Tables exist for a reason.

Are you mis-interpreting the common, correct, statement that you should not use tables for layout?

Thanks for all,

Reason why i am doing this, we did it in ul li but when looking into programmers code they came up with tables. So i am trying to modify using js