jQuery Recipies

<table id="tblEmployee" class="normal_table">
    <tr>
        <td>Employee Name</td><td>Department Name</td><td>Salary</td>
    </tr>
    <tr>
        <td>Jane Smith</td><td>Marketing</td><td>$95,000</td>
    </tr>
    <tr>
        <td>John Smith</td><td>Technology</td><td>$90,000</td>
    </tr>
    <tr>
        <td>Brian Adam</td><td>Sales</td><td>$72,000</td>
    </tr>
    <tr>
        <td>Mary Jones</td><td>Support</td><td>$60,000</td>
    </tr>
    <tr>
        <td>Michael Jefferson</td><td>Technology</td><td>$85,000</td>
    </tr>
</table>
<br />
   
<input id="btnTestIt" type="button" value="Test It">

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnTestIt").click(function () {
            var jqObj = $("tr:gt(0)").map(function () {
                return $(this).children().first().text();
            })

            $(jqObj).each(function (index, elem) {
                ZEUS.DEBUG.log(elem);
            });

            ZEUS.DEBUG.log("---------------------------");
            var employees = jqObj.get().join(", ");
            ZEUS.DEBUG.log(employees);
        });
    });
</script>

$("tr:gt(0)") selects all the HTML elements with the tag name "tr" except for the first record and returns the
jQuery object.

.map() iterates through each element from the set of selected elements and processes them in the function.
return $(this).children().first().text() returns the text content of the first child element (td) of each
selected "tr" element, which is the employee name.
A new jQuery object (jqObj) is created that contains elements as a result of the return value of the function.

jqObj.get() gets all the HTML elements from the jQuery object as an array.

.join(", ") joins all elements from the array, delimits them with commas (,) and returns a string that contains
a comma-delimited list of all the employees’ names.