Jquery: Converting Tables into ls

Question

Just looking to converting this with jQuery because I need to style a system that is generated by another company:

<table class="steps">
        <tr>

            <td class="steps-on-colors on step-welcome"><a href="index.cgi">Welcome</a> </td>

            <td class="step-select-items">Catalogue </td>

        </tr>
</table>

to this

<ul>

    <li class="steps-on-colors on step-welcome"><a href="index.cgi">Welcome</a> </li>

    <li class="step-select-items">Catalogue </li>  

</ul>

so far I have:

$(document).ready(function() {
    var ul = $("<ul>");
    $("table tr").each(function(){
    var li = $("<li>")
    $("th, td", this).each(function(){
    var p = $("<li>").html(this.innerHTML);
    li.append(p);
    });
    ul.append(li);
    })    
    $("table").replaceWith(ul);    
});

Answer 1

You are adding an <li> element to the variable p, then then adding p (which contains an <li>) to the li element which is also an <li>.

You can append your p variable straight to the ul

$(document).ready(function() {
    var ul = $("<ul>");
    $("table tr").each(function(){
      $("th, td", this).each(function(){
        var p = $("<li>").html(this.innerHTML);
        ul.append(p);
      });
    })
    $("table").replaceWith(ul);
});