Question

I have the following view inside my asp.net MVC web application:-

<table id="tablelist" border="1">
    <tr>

    </tr>
    </table>

and i am trying to fill the table using the following java script:-

function getprocesslist(result) {
    var str = 'Total Number Of Processes:- ' + result.total.toString();
        $('#total').text(str.toString());
        var str1 = '<th>'+ 'Process Name' + '</th><th>'+ 'Process Requestor ID' + '</th><th>'+ 'Process State' +' </th><th>'+ 'Process Start Date' +' </th><th>'+ 'Process Due Date' +' </th>';
        $('#tablelist tr:last').after(str1);
    $.each(result.data, function (key, val) {
        var str2 = '<tr><td>' + val.name + '</td><td>' + val.requesterId + '</td><td>' + val.state + '</td><td>' + val.startedTime + '</td><td>' + val.due + '</td></tr>';

        $('#tablelist tr:last').after(str2);

    });

But i am facing the following problems with the above code:-

1. the table header <th> will be displayed at the end of the table instead of being the first row.

2. if i execute the same script more than one time then the table format will be wrong, and the table data will be displayed in multiple lines inside each table cell.

3. no table boarders is being displayed, although i define the border="1".

Best Regards

Answer 1

The reason your header is showing up at the bottom of the table is that it isn’t inside a <tr>, which is invalid, and your browser doesn’t quite know what to do with it. Wrap it in a <tr> and you’ll be fine. This would probably also resolve your second problem.

As for borders, they should appear once your markup is valid, assuming there are no other overriding styles.

Demo