1

asp.netMVCWebアプリケーション内に次のビューがあります。-

<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

ヘッダーがテーブルの下部に表示される理由は、ヘッダーがの内部にないためです<tr>。これは無効であり、ブラウザーはヘッダーをどう処理するかを完全に認識していません。で包むと<tr>大丈夫です。これにより、おそらく2番目の問題も解決されます。

境界線については、他にオーバーライドするスタイルがないと仮定して、マークアップが有効になると表示されます。

デモ

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

ボーダーには、css、broを使用します。

編集：@DavidHedlundの回答によると、使用する必要があり、使用する必要はappendありませんafter。 テーブルの行の後afterに要素を挿入しますが、必要な行に要素を挿入する必要があります。append

于 2012-10-24T10:09:42.010 に答える