Javascript 可以使用Jquery构建表

我的asp.net MVC web应用程序中有以下视图：-

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

    </tr>
    </table>

我尝试使用以下java脚本填充该表：-

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);

    });

函数getprocesslist（结果）{ var str='进程总数：-'+result.Total.toString（）； $（'#total'）.text（str.toString（））； var str1=''+'流程名称'+''+'流程请求者ID'+''+'流程状态'+''+'流程开始日期'+''+'流程到期日期'+''； $（'tablelist tr:last'）。在（str1）之后； $.each（result.data，function（key，val）{ var str2=''+val.name+''+val.requesterId+''+val.state+''+val.startedTime+''+val.due+''； $（'tablelist tr:last'）。在（str2）之后； }); 但我在上述代码中面临以下问题：-

表格标题

将显示在表格的末尾，而不是第一行

如果我多次执行同一个脚本，那么表格式将错误，并且表数据将显示在每个表单元格内的多行中

虽然我定义了

border=“1”

，但没有显示任何表格边框

---

致以最诚挚的问候

您的标题显示在表格底部的原因是它不在

中，这是无效的，并且您的浏览器不太知道如何处理它。将其包装在

中，您就可以了。这可能也解决了您的第二个问题

至于边框，如果没有其他替代样式，它们应该在标记有效后显示

---

将表格分成

thead

和

tbody

元素。然后只需将新的

th

单元格附加到

thead tr

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

        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

对于boder，使用css，兄弟

---

编辑：根据@DavidHedlund的回答，您需要使用

append

而不是

after

after

将在表行后插入元素，但您希望它位于行中，为此，您需要

append

ad3）对边框使用样式。请查看prepend（）而不是after（）它位于

tr

中。是唯一一个硬编码的标记。不，不是，您正在添加内容

。在
tr
之后，不是
。将它附加到
tr
中。
$('#tablelist thead tr:last').append(str1);
...
$('#tablelist tbody tr:last').append(str1);