5

Web アプリでテーブルを描画するために、jQuery 用の DataTables プラグインを使用しています。すべてが正しく機能しています。ただし、オプションの 1 つは、詳細ボタンを押して、追加の値を持つ情報ウィンドウを開くことです。その部分は正しく機能していますが、テーブルはクラスで定義されているため、ユーザーがメニューを使用して言語を変更したときに言語を動的に変更できます。

最初に宣言したように、私が得ているのは英語だけです。

私の事前定義されたテーブル:

function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="background-color:whitesmoke; padding-left:10%; padding-right:10%; width:100%">';
    sOut += '<tr><td style="text-align:left"><span class="id_prog">ID Program : '+aData[0]+'</span></td><td style="text-align:left"><span class="id_in_perc">Increment : '+aData[3]+'</span></td></tr>';
    sOut += '<tr><td style="text-align:left"><span class="id_var">Machine position : '+aData[1]+'</span></td><td style="text-align:left"><span class="id_tot_in_var">Total inc : '+aData[4]+'</span></td></tr>';
    sOut += '<tr><td style="text-align:left"><span class="id_dti_var">DTI : '+aData[2]+'</span></td></tr>';
    sOut += '</table>';

    return sOut;
}

言語を変更し、JavaScript がクラス名を介して各値を変更すると、何も起こりませんが、コードの残りの部分ではこれは正常に機能しますが、この定義済みのテーブルでは機能しません。何か案が？

編集

これはイベント リスナーです。

$('#jphit tbody td img').live( 'click', function () {
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            /* This row is already open - close it */
            this.src = "images/plus-icon.png";
            oTable.fnClose( nTr );
        }
        else
        {
            /* Open this row */
            this.src = "images/minus-icon.png";
            oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
        }
} );

したがって、ボタンをクリックするとfnFormatDetails()関数が呼び出されますが、設定されているとおりにのみ描画されます。したがって、そのテーブルの値を動的に変更しても、何も変更されません。

詳細が必要ですか？

4

2 に答える 2

4

私の理解が正しければ、常にページにあるテーブルの内容を動的に変更しようとします。なぜそれをJavaScriptに入れるのかわかりませんが、jQueryを使用しているので、別のアプローチをお勧めします。

これはあなたのhtmlファイルにあります。

<table id="myTable">
    <tr>
        <td><span id="id1"><!-- content will load here --></span></td>
        <td><span id="id2"><!-- content will load here --></span></td>
    </tr>
</table>

これらの値は一意であるため、クラスの代わりに id を使用します。

そして、html タグの内容を置き換えるための JavaScript。

function fnFormatDetails ( nTr ) {
    var aData = oTable.fnGetData( nTr );
    $("#id1").html("My data here " + aData[0]);
    $("#id2").html("My data here " + aData[1]);
    ...
}

これにより、指定された id を持つタグの html コンテンツが、属性として指定されたコンテンツに置き換えられます。

それがあなたを助けることを願っています。

于 2012-08-24T17:28:24.957 に答える
1

1）console.logを介してfnFormatDetailsのaDataを確認することをお勧めします。これにより、関数が実行され、配列に正しい値が表示されるようになります。

2）nTr.html（ ""）で古いテーブルをクリアしてみて、それで何かが改善されるかどうかを確認します。

表の画像を貼り付けて、理解を深めてください。

于 2012-08-30T14:26:28.790 に答える