CODEWITHSUNDEEP
jqueryhtmlcss
SilentBobSC
SilentBobSC

Reputation: 435

Manipulating and Converting Table Items using jQuery

Ok, I've hit a brick wall. I have a project where I need to convert items (Photos) listed in a table into a UL for further jQuery Manipulation (ideally using jQuery Cycle - http://www.malsup.com/jquery/cycle/ ). I had located this Stack Overflow post (How to transform HTML table to list with JQuery?) , however the code seems a bit one-use and specific to the OP's use. I am also curious if this would need to be executed at a certain point on the page load (pre-DOM ready, Post DOM-ready, etc).

Unfortunately, I don't have much of an option for formatting the output as it is produced by a 3rd party module. Currently, the output is formatted like this (IDs and URLs Simplified for space and clarity):

<!-- First Item, I can set this to format however I like -->


<a href="16.jpg" rel="lightbox2" title=""><img src="16.jpg" class="FirstPhoto" alt="" width="320" height="240" /></a>

<!-- Subsequent Items are put into a table, as the developer has explained - rendered as a Datalist -->
<table id="CMS-ASSIGNED-UNIQUEID" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
        <tr>
            <td align="center">
            <a href="17.jpg" rel="lightbox2" title=""><img src="17.jpg" class="ItemPhoto" width="125" height="94" alt=""></a>
            </td>
            <td align="center">
            <a href="18.jpg" rel="lightbox2" title=""><img src="18.jpg" class="ItemPhoto" width="125" height="94" alt=""></a>
            </td>
        </tr>
        <!-- Continue for n Rows -->
        </tr>
    </table>

Ideally, I would like to get it to export like this (note that the first item is also in there, I can work around this if it's beyond the scope of what's possible):

    <div class="slideshow">
    <img src="16.jpg" width="125" height="94" />
    <img src="17.jpg" width="125" height="94" />
    <img src="18.jpg" width="125" height="94" />
</div>

Upvotes: 0

Views: 750

Answers (3)

dcharles
dcharles

Reputation: 4852

This little bit of jQuery will grab all the img elements and add them to the slideshow element container

$(function() {
    $('<div class="slideshow"></div>')
        .appendTo('body')
        .append(
            $('a[rel=lightbox2] > img').clone()
            .removeClass()
            .attr({ height: 94, width: 125 })
        );
});

At this point you should be able to run your slideshow.

Upvotes: 1

John Fisher
John Fisher

Reputation: 22719

Here's some stuff to get you going. It may need modifications to your specific needs, since the context around your HTML is missing.

var images = $('img.FirstPhoto, img.ItemPhoto');
var newImages = [];
newImages[newImages.length] = '<div class="slideshow">';
images.each(function() {
  var img = $(this);
  newImages[newImages.length] = '<img src="';
  newImages[newImages.length] = img.attr('src');
  newImages[newImages.length] = '" width="';
  newImages[newImages.length] = img.attr('width');
  newImages[newImages.length] = '" height="';
  newImages[newImages.length] = img.attr('height');
  newImages[newImages.length] = '" />';
});
newImages[newImages.lenght] = '</div>';

var newHtml = newImages.join('');
var newElement = $(newHtml);

var table = $('table#CMS-ASSIGNED-UNIQUEID');
table.after(newElement);
table.remove();

$('img.FirstPhoto').closest('a').remove();

Upvotes: 0

slikts
slikts

Reputation: 8158

If I'm not mistaken, this seems like the simple case of:

$(document).ready(function()
{
    var container = $(document.createElement('div'))
        .addClass('slideshow');
    $('#CMS-ASSIGNED-UNIQUEID img.ItemPhoto')
        .removeClass('ItemPhoto')
        .appendTo(container);
});

Calling container.html() would give you the output you wanted, or you could include the element in the DOM of the document directly. The ready method will also make sure the table is available (unless it's loaded dynamically at a later point).

Upvotes: 0

Related Questions