Replacing tables with unordered lists

[designershiv]

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

[designershiv]

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

[jspence29]

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.

[JorgeM]

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.

[EvolutionFallen]

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>

[drjohn]

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?

[designershiv]

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