Various Item Classes

[email protected]

by Ryan Brackett

HTML

<table>
    <td>
        <div>Price:</div>
        <div>$2,640,000</div>
    </td>
    <td>
        <div>Type:</div>
        <div>Goes Here</div>
    </td>
    <td>
        <div>Year Built:</div>
        <div>2006</div>
    </td>
    <td>
        <div>Sq. Ft.:</div>
        <div>60,000</div>
    </td>
    <td>
        <div>Bedrooms:</div>
        <div>7</div>
    </td>
    <td>
        <div>Bathrooms:</div>
        <div>6</div>
    </td>
    <td>
        <div>Half-Baths</div>
        <div>4</div>
    </td>
    <td>
        <div>Garage</div>
        <div>4 Vehicle</div>
    </td>
</table>
<div class="clearall"></div>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}
table {
    width: 100%;
    border: none;
}
table td {
    border-left: 1px solid #cbcbcb;
    width: 21%;
    color: black;
    float: left;
    padding: 10px 0px;
    padding-left: 3%;
    white-space:nowrap;
}
table td.row-top {
    color: blue;
}
table td.row-bottom {
    border-top: 1px solid #cbcbcb;
    color: green;
}
table td.item-001 {
    border-left: none;
    font-weight: bold;
}
table td.item-004 {
   color: orange;
    font-style: italic;
}

JavaScript

// Add a class to first four items
$("td").slice(0, 4).addClass("row-top");

// Add a class to last four items and beyond
$("td").slice(4).addClass("row-bottom");

// Add classes sequentially to items up 4 and then start over
$("td").each(function (i) {
    $(this).addClass("item-00" + (i % 4 + 1));
});