Jquery replace table with

Question

I have this table:

<table class="catsTable" width="100%" cellspacing="1" cellpadding="0" border="0">
  <tbody><tr>
    <td style="width:25%" class="catsTd" id="cid5" valign="top">
        <a href="/load/prison_break_online/sezonul_1/5" >Sezonul 1</a> <span class="catNumData" style="unicode-bidi:embed;">[6]</span>
    </td>
    <td style="width:25%" class="catsTd" id="cid6" valign="top"><a href="/prison_break_online/sezonul_2/6" class="catName">Sezonul 2</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
    <td style="width:25%" class="catsTd" id="cid7" valign="top"><a href="/prison_break_online/sezonul_3/7" class="catName">Sezonul 3</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
    <td style="width:25%" class="catsTd" id="cid8" valign="top"><a href="/prison_break_online/sezonul_4/8" class="catName">Sezonul 4</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
  </tr></tbody>
</table>

So it is possible to replace this with :

<ul id="menu-css">
    <li><a href="/prison_break_online/sezonul_2/6">Sezonul 2</a></li>
    <li><a href="/prison_break_online/sezonul_3/7">Sezonul 3</a></li>
    <li><a href="/prison_break_online/sezonul_4/8">Sezonul 4</a></li>
    <li><a href="/prison_break_online/sezonul_5/9">Sezonul 4</a></li>
</ul>

I tried with:

<script>
    $($('.catsTable').find('td').get().reverse()).each(function(){
         $(this).replaceWith($('<li>'+$(this).html()+'</li>'))
    })
    $('.catNumData').remove();
</script>

but there still remains <table><tbody><tr> or is not even possible something like this?

David Thomas · Accepted Answer · 2013-01-30 23:02:54Z

1

Why not simply:

var newUL = $('<ul />',{'id' : 'menu-css'}).insertBefore('table.catsTable');
$('table.catsTable').find('a').each(function(){
    $(this).wrap('<li></li>').parent().appendTo(newUL);
}).closest('ul').next('table').remove();

JS Fiddle demo.

References:

edited Jan 30, 2013 at 23:02

answered Jan 30, 2013 at 22:56

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

Comments

CoderOfHonor · Accepted Answer · 2013-01-30 22:52:51Z

0

Perhaps you should try this fix:

<script>
    $('.catsTable').find('td').each(function(){
         $(this).replaceWith('<li>'+$(this).html()+'</li>);
    });
    $('.catNumData').remove();
</script>

I fixed some of your syntax. You had some extra $() that I deleted.

answered Jan 30, 2013 at 22:52

CoderOfHonor

7417 silver badges17 bronze badges

Comments

DarkAjax · Accepted Answer · 2013-01-30 22:56:03Z

0

If you want to replace all the table with the <ul>, you could do something like:

$('.catsTable').after('<ul id="menu-css">' + 
    '<li><a href="/prison_break_online/sezonul_2/6">Sezonul 2</a></li>' +
    '<li><a href="/prison_break_online/sezonul_3/7">Sezonul 3</a></li>' +
    '<li><a href="/prison_break_online/sezonul_4/8">Sezonul 4</a></li>' +
    '<li><a href="/prison_break_online/sezonul_5/9">Sezonul 4</a></li>' +
'</ul>').first().remove();

I hope I'm not misunderstanding what you want...

answered Jan 30, 2013 at 22:56

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

Collectives™ on Stack Overflow

Jquery replace table with

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related