1

我在我的 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);

    });

但是我在上面的代码中面临以下问题：-

  1. 表头<th>将显示在表的末尾而不是第一行。

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

  3. 尽管我定义了border="1".

此致

4

2 回答 2

2

您的标题显示在表格底部的原因是它不在 a 内<tr>，这是无效的，并且您的浏览器不太知道如何处理它。把它包起来，<tr>你会没事的。这可能也可以解决您的第二个问题。

至于边框，它们应该在您的标记有效时出现，假设没有其他覆盖样式。

演示

于 2012-10-24T10:08:45.033 回答
0

将您的表格分成thead和tbody元素。然后只需将一个新th单元格附加到thead tr

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

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

javascript

$('#tablelist thead tr:last').append(str1);
...
$('#tablelist tbody tr:last').append(str1);

对于boder，使用css，兄弟。

编辑：根据@DavidHedlund 的回答，您需要使用append而不是after. 将在表格行之后after插入元素，但您希望它在您需要的行中。append

于 2012-10-24T10:09:42.010 回答