Question

I have a problem while generating a list of live search results – I put them in a special div with id “result” the way below (dont mind the SightsList, this is an AJAX – pre-retrieved array; also the algorythm is not optimal, I know it, but that’s not the subject). So the main issue is why table rows get thrown out of a table? Html in browser looks like <table></table><tr><td>(and then all the lines generated). The same problem goes with <ul> and <li>.

$("input#namebox").keyup(function() {  

    var value = $(this).val();
    value = value.toLowerCase();
    value = $.trim(value);

    if (value.length > 3) {

        $("#result").html("<table>");

        for (var i=0; i<SightsList.length; i++) {
            if (undefined != SightsList[i]) {
                if (void 0 != SightsList[i]) {

                    SightsList[i] = SightsList[i].toLowerCase();

                    if (SightsList[i].indexOf(value)+1) {

                        $("#result").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ '  –  ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

                        $("#message").show();
                    }
                }
            }

            if (i==(SightsList.length-1)) {
                $("#result").append("</table>");
            }
        }


        //tried to close table here with the same (no) result                                   $('.singleresult').highlight(value);

        $("#result").show();
    }

    if (value.length < 4) { 
        $("#result").hide();
        $("#result").html("");  
    }
}

Answer 1

.html and .append aren’t just string functions, they work on the DOM.

$("#result").html("<table>") places a table in the #result element. Since there are no rows specified, it is an empty table (<table></table>). Then your .append tries to put a row after that table.

So instead of appending to the contents of #result, you want to append to the table you are creating:

$("#result > table").append('<tr><td class="singleresult" valign="middle">' + SightsList[i]+ ' ' + '<img src="/images/balloon.gif" rel="'+ i +'" class="balloon_img" /></td></tr>');

and remove your attempt to add an end-table tag.