jQuery Data Methods Demo

ISBN Title Media Price Inventory Favorite
978-0-470-45733-7 DotNetNuke and Web Standards eBook $6.99 -1 User Favorite
978-0-470-43870-1 Professional DotNetNuke 5 Paperback $49.99 55 Not a Favorite
978-0-470-46257-7 DotNetNuke 5 User's Guide Paperback $49.99 10 Not a Favorite
978-0-470-17116-5 Professional DotNetNuke Module Programming Paperback $49.99 5000 Not a Favorite
Book Details
I really liked this book!

JavaScript Source

jQuery(function() {
    var book = $("#bookdetails");
    book.hide();

    $("tbody>tr")
    .mouseenter(function() {
        $(this).toggleClass("highlight");
        showBook($(this));
        book.show();
    })
    .mouseleave(function() {
        $(this).toggleClass("highlight");
        book.hide();
    })
    .each(bindData);

    $("img").click(function() {
        var row = $(this).closest("tr");

        /* We can read the data, and if we use objects we can set object values as well */
        row.data("details").fav = (row.data("details").fav == "no") ? "yes" : "no";
        showFavIcon(row);
    });
});

function bindData() {
    var row = $(this),
    isbn = $.trim($("td:eq(0)", row).text()).substr(9).replace(/-/gi, '');

    /* Using the data method to store additional data for each row in the table */
    switch (isbn) {
        case "457337":
            $(this).data("details", {
                img: "/images/0470" + isbn + ".jpg",
                author: "Cuong Dang",
                pages: "26 pages",
                pubdate: "December 2008",
                fav: "no"
            });
            showFavIcon(row);
            break;
        case "438701":
            $(this).data("details", {
                img: "/images/0470" + isbn + ".jpg",
                author: "Shaun Walker, Brian Scarbeau, Darrell Hardy, Stan Schultes, Ryan Morgan",
                pages: "600 pages",
                pubdate: "February 2009",
                fav: "no"
            });
            showFavIcon(row);
            break;
        case "462577":
            $(this).data("details", {
                img: "/images/0470" + isbn + ".jpg",
                author: "Shaun Walker (Series Editor), Christopher J. Hammond, Patrick Renner",
                pages: "312 pages",
                pubdate: "July 2009",
                fav: "no"
            });
            showFavIcon(row);
            break;
        case "171165":
            $(this).data("details", {
                img: "/images/0470" + isbn + ".jpg",
                author: "Mitchel Sellers, Shaun Walker (Series Editor)",
                pages: "336 pages",
                pubdate: "February 2009",
                fav: "no"
            });
            showFavIcon(row);
            break;
    }
}

function showFavIcon(row) {

    var icon = (row.data("details").fav == "no") ? "/images/unchecked.png" : "/images/checked.png";
    $("td>img", row).attr("src", icon);

}

function showBook(row) {
    /* I can easily retrieve the entire object at the named data store for the element */
    var bookdetails = row.data("details");

    $("#cover").attr("src", bookdetails.img);
    $("#author").text("Authors: " + bookdetails.author);
    $("#pages").text("Pages: " + bookdetails.pages);
    $("#pubdate").text("Published: " + bookdetails.pubdate);
    (bookdetails.fav == "yes") ? $("#fav").show() : $("#fav").hide();
}