Question

I have a mobile app and I have the following problem.

I select some values from two tables and I am trying to create one table from these selections.
Here is my code:

    list.append('<table class="tablesorter">');
    list.append('<thead><tr><th>Building</th><th>Reason</th><th>Receipt</th><th>Amount</th></tr></thead><tbody>');

    for (j = 0; j < lenpay; j += 1) {
        dummy1(j);
    }

    for (i = 0; i < len; i += 1) {
        dummy(i);
    }

    list.append('</tbody></table>');

dummy and dummy1 are functions that selects data from table and build the rows for the html table

function dummy(i){
    selectsql......

    list.append('<tr><td>' + data A + '</td><td>' + data B + '</td><td>' + data C + '</td><td><font color="blue">' + data D + '</font></td></tr>');
}

and

function dummy(i){
    selectsql......

    list.append('<tr><td>' + DATA A + '</td><td>' + DATA B + '</td><td>' + DATA C + '</td><td><font color="blue">' + DATA D + '</font></td></tr>');
}

the result is a table look html but if inspect it with firebug the table is broken. So I cannot sort it by a column. What I am doing wrong?

How can I create a right html table?

Answer 1

Your table is broken because you’re using it wrong. When you do this:

list.append('<table class="tablesorter">');

You’re already appending a <table></table> including the closing tag even if not specified. Then you do this which appends another closing tag…

list.append('</tbody></table>');

Use append() with full objects and not markup parts. And, if possible, append everything at last. A good approach is to use a string variable where you put all your markup and then just ONE append() call. Also don’t use <font>, it’s been deprecated for ever. I’ve no way to try this but you get the idea:

var html = '',
    items = [];


function dummy(i) {
    selectsql......

    items.push('<tr><td>' + data A + '</td>'+
                '<td>' + data B + '</td>'+
                '<td>' + data C + '</td>'+
                '<td><span class="blue">' + data D + '</span></td></tr>');
}

html += '<table class="tablesorter">' +
        '<thead>'+
        '<tr>'+
        '<th>Building</th>'+
        '<th>Reason</th>'+
        '<th>Receipt</th>'+
        '<th>Amount</th>'+
        '</tr>'+
        '</thead>'+
        '<tbody>'+
        items.join('') +
        '</tbody></table>';

list.append(html);