jQueryのDatatablesにてadd時にtdのタグの属性を変更したい。

jQueryのDatatablesに後からaddをし行を追加する過程でtrタグのid属性やclass属性を設定したいのですがうまくいきません。tdタグの属性は変更できました。
(下記参考コード）
var test = ["000000", "<class='chara1'>05/02(火)", "<class='order_num'>テスト太郎", "00:00", "00:00", "00:00"]
data_table.row.add(test);

上記コードを使用すればtdタグの属性をchara1やorder_numにすることができますが、trタグの変更がどうすればいいかわかりません。
何卒ご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

最初に「行を追加した場合」の処理(下記コード内 createdRow の部分です)を設定できるようなので、下記のようにその部分で if文などを設定する感じでどうでしょうか。

試してみたコードは ↓ です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
    <script>
        $(function($){
            var data_table = $("#foo-table").DataTable({
                "createdRow": function( row, data, dataIndex ) {
            //もし追加する行データの最初の数が２なら
                if ( data[0] == "2" ) {
            //trにクラスを追加して、targetをおばあちゃんにしています。
                $(row).addClass( 'o-Ziichang' ).attr("target","魔王おばあちゃん");
        }
  }
            });
            var test = ["2", "おじいちゃんの逆襲"]; 
            var test2 = ["3", "逆襲しない"]; 
            data_table.row.add(test).draw();
            data_table.row.add(test2).draw();
        });
    </script>
    <title></title>
</head>
<body>
    <table id="foo-table" class="table table-bordered">
        <thead>
            <tr><th>No</th><th>都道府県</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>北海道</td></tr>
            <tr><td>22</td><td>青森県</td></tr>
            <tr><td>33</td><td>岩手県</td></tr>
            <tr><td>4</td><td>宮城県</td></tr>
            <tr><td>5</td><td>秋田県</td></tr>
            <tr><td>6</td><td>山形県</td></tr>
            <tr><td>7</td><td>福島県</td></tr>
            <tr><td>8</td><td>茨城県</td></tr>
            <tr><td>9</td><td>栃木県</td></tr>
            <tr><td>10</td><td>群馬県</td></tr>
            <tr><td>47</td><td>沖縄県</td></tr>
        </tbody>
    </table>
</body>
</html>

★tdにもクラスなどを追加したい場合
今回追加した、"createdRow" での動作を追加することで、tdにもクラスを追加できると思います。
具体的には下記をご確認ください↓

var data_table = $("#foo-table").DataTable({
                "createdRow": function( row, data, dataIndex ) {
            //もし追加する行データの最初の数が２なら
                if ( data[0] == "2" ) {
            //trにクラスを追加して、targetをおばあちゃんにしています。
                $(row).addClass( 'o-Ziichang' ).attr("target","魔王おばあちゃん");
        }
           //↓がtdにクラスをつけるサンプルです
               //もし追加する行データの最初の数が3なら
                if(data[0] == "3"){
                //追加する行からtdを検索して、操作します。
                $(row).find("td").addClass( 'mago' ).attr("name","最後の切り札　孫");

                //tdの一つ目だけ操作します。
                $(row).find("td").eq(0).addClass( 'dondokodon' );

                //tdの2つ目だけ操作します。
                $(row).find("td").eq(1).addClass( 'sayounara' );

                }
  }
            });

投稿2017/05/09 02:37

編集2017/05/10 10:13