Question

I have the following function which is passed an object which i am trying to represent as a table.

I am trying to loop over an inner object in order to add the required table rows however i get an exception once my loop has finished saying ‘Uncaught Error: NOT_FOUND_ERR: DOM Exception 8’

Any ideas?

function addTableLegend(seriesObj) {
$('#divTableLegends').append(
    $('<table>').attr({
        'id': 'tbl' + seriesObj.seriesIndex,
        'class': 'ipTable'
    }).append(
        $('<thead>').append(
            $('<tr>').append(
                $('<td>').append(seriesObj.name)
            ).append(
                $('<td>').append('Standard Deviation')
            ).append(
                $('<td>').append('Expected Return')
            )
        )
    ).append(
        $('<tbody>').append(
            $.each(seriesObj.objData, function (i, val) {
                $('<tr>')
                // ***Uncaught Error: NOT_FOUND_ERR: DOM Exception 8***
            })               
        )
    )
);
}

Answer 1

$.each returns a regular object, not a jQuery list.
This is why it cannot be added using .append()

Though I think you mean something like this:

function addTableLegend(seriesObj) {

    // Define the table
    var tbl = $('<table>').attr({
            'id': 'tbl' + seriesObj.seriesIndex,
            'class': 'ipTable'
        }).append(
            $('<thead>').append(
                $('<tr>').append(
                    $('<td>').append(seriesObj.name)
                ).append(
                    $('<td>').append('Standard Deviation')
                ).append(
                    $('<td>').append('Expected Return')
                )
            )
        ).append($('<tbody>'));

    // Append the table
    $('#divTableLegends').append(tbl);

    // Container alias
    var container = tbl.children('tbody').first();

    // Iterate the data
    $.each(seriesObj.objData, function (i, val) {

        // Add item to table
        container.append(
            $('<tr>').append(
                $('<td>').html(val),
                $('<td>').html('MyDeviation'),
                $('<td>').html('MyReturn')
            )
        );

    });
}​