Is it possible to take a table layout with images for a photo gallery and re-code to be a ul?

Question

I have a table layout with the following code

<table cellspacing="0" class="photogalleryTable">
<tbody>
<tr>
<td class="photogalleryItem"><a title="" href="/images/varsity_basketball/alexdefending.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=100&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c72488%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cnyrkqrsraqvat.wct&amp;USM=1"></a></td>
<td class="photogalleryItem"><a title="" href="/images/varsity_basketball/cheerweb.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=100&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c72488%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cpurrejro.wct&amp;USM=1"></a></td>
</tr>
</tbody>
</table>

Is it possible to use jQuery to re-format to a unordered list? Somehow convert the td tag to a li tag and remove the rest?

Thanks in advance for any help.

Answer 1

Sure, something like (untested)

$("table").find("td").each(function(idx,elt){
  $("<li>").html($(elt).html()).appendTo("#target");
});
$("table").remove();

note : you should have a ul somewhere with id 'target', and the selector for the table should be made more precise if there's more than 1 table on the page.

Answer 2

Is the code being generated, e.g. by php? If you do, do you have access to it?

Otherwise, I'd probably strip out each <img /> and build into a <ul>, rather than replace the table code with <ul> and <li>s.

Answer 3

var table = $('.photogalleryTable').before('<ul class="photogallery"></ul>')
table.find('td a').wrap('<li>').parent().appendTo('ul.photogallery');
table.remove();