Member Avatar for 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>)

  • 5 Contributors
  • 6 Replies
  • 379 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by designershiv

Dani AI

Generated

Converting a table to a list is a semantic decision, not just a markup change. and are correct: if the content is truly tabular (rows/columns of related data), keep it as a table. ’s point about fixing the source HTML instead of relying on client-side scripts is also important — server-side or template changes are more robust and provide progressive enhancement.

What ’s jQuery does, in plain terms, is: create a new unordered list, loop each table row, gather each cell’s HTML into small blocks, wrap those blocks inside a single list item, append that to the UL, then replace the original table node with the new UL. ’s description captures the high-level flow, but note that the script builds markup by concatenating HTML strings (so it clones visual content but can lose runtime bindings, and it depends on jQuery and JS availability).

If conversion is required, follow these rules: avoid changing tabular data to lists; prefer changing templates/server output; preserve semantics (use labeled/pair structures when appropriate); copy relevant attributes (ids, classes, data-*) and provide accessible labels for what were table headers; and handle colspan/rowspan explicitly (these don’t translate automatically). Test with a keyboard and a screen reader after conversion.

A safer, small vanilla-JS approach clones cell nodes into a newly created UL (preserves child markup without string concatenation):

function convertTableToList(table) {
  const ul = document.createElement('ul');
  if (table.id) ul.id = table.id + '-list';
  Array.from(table.rows).forEach(tr => {
    const li = document.createElement('li');
    Array.from(tr.cells).forEach(cell => {
      const wrapper = document.createElement('span');
      wrapper.className = 'cell';
      Array.from(cell.childNodes).forEach(n => wrapper.appendChild(n.cloneNode(true)));
      li.appendChild(wrapper);
    });
    ul.appendChild(li);
  });
  table.parentNode.replaceChild(ul, table);
}

Notes: this preserves child DOM but does not resolve complex spanning or header associations — those need explicit handling. If you control production HTML, change the source; use JS only as a fallback.

Recommended Answers

All 6 Replies

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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>
Member Avatar for 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?

Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.