3

以下のコードを使用して、ID、クラス、およびイベントを DataTables に新しく追加されたセルに追加する必要があります。どうすればそれを達成できますか？

var rtn = oTable.fnAddData(['Cell1Value', 'Cell2Value', 'Cell3Value']);

この新しく追加されたセルをクリックすると、javaScript 関数を起動しようとしています。

4

1 に答える 1

5

少し不格好ですが、このようなことを行うことで、探しているものを達成できます。

ここにフィドルを作成しました

HTML

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd gradeX">
                <td>Trident</td>
                <td>Internet
                     Explorer 4.0</td>
                <td>Win 95+</td>
                <td class="center"> 4</td>
                <td class="center">X</td>
            </tr>
            <tr class="even gradeC">
                <td>Trident</td>
                <td>Internet
                     Explorer 5.0</td>
                <td>Win 95+</td>
                <td class="center">5</td>
                <td class="center">C</td>
            </tr>
            <tr class="odd gradeA">
                <td>Trident</td>
                <td>Internet
                     Explorer 5.5</td>
                <td>Win 95+</td>
                <td class="center">5.5</td>
                <td class="center">A</td>
            </tr>
      </tbody>  
        <tfoot>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </tfoot>
    </table>
<button id="addnewrow">Add New Row</button>

JS

$('#addnewrow').click(function(){
//add row
  var newRow = $('#example').dataTable().fnAddData( [
   "1",
    "2",
    "3",
    "4",
     "5"]
  );

  //change cell attributes
  var oSettings = dataTable.fnSettings();
var nTr = oSettings.aoData[ newRow[0] ].nTr;
$('td', nTr)[0].setAttribute( 'id', 'newid1' );
$('td', nTr)[1].setAttribute( 'id', 'newid2' );
$('td', nTr)[2].setAttribute( 'id', 'newid3' );
$('td', nTr)[3].setAttribute( 'id', 'newid4' );
$('td', nTr)[4].setAttribute( 'id', 'newid5' );

});

次に、新しいIDまたはクラスのクリックを次のように委任するだけです

$('table').delegate('#newid1','click', function(){
 alert('clicked on new cell 1') 
})

ここに参照があります

于 2013-01-15T17:55:18.703 に答える