htmlのテーブルビューを更新するには？

Question

私のプロジェクトにこのコードを使用しましたhttps://getmdl.io。そのシンプルでうまく設計されたフロントエンド。そして、ページがロードされた後、各行にいくつかのチェックマークがロードされます。

しかし、私は動的にいくつかの行をtbodyにajaxで追加した後にテーブルビューを更新するのに問題があります。使用されているこのソースhttps://github.com/jasonmayes/mdl-component-design-patternによる

$.ajax({ 
    url: "api2.php", 
    success: function(result) { 
     result = $.parseJSON(result); 
     $tabela = $("#test-table").find("tbody"); 
     for (var i = 0; i < result.length; i++) { 
      var newTrow = document.createElement("tr"); 
      var newTdata = document.createElement("td"); 
      newTdata.className="mdl-data-table__cell--non-numeric"; 
      newTdata.innerHTML = result[i]; 
      newTrow.appendChild(newTdata); 
      newTrow.innerHTML+="<td>asdf</td><td>asdf</td>"; 

      $($tabela).append(newTrow); 

     }; 
     componentHandler.upgradeElement($tabela, "mdl-data-table--selectable"); // I have tried many options for both parameters nothing works 

     if (chosen_browser_is_supported()) { 
      $("#subjects").chosen({ 
       width: "450px" 
      }); 
     } else { 
      $("#subjects").show(); 
     } 
    } 
}); 

：私はTBODY要素を取得することにより、それらを追加し、その後のdocument.createElement（「TD」）新しい行を追加するために使用される

<table id="test-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
    <thead> 
     <tr> 
      <th class="mdl-data-table__cell--non-numeric">Predmet</th> 
      <th>Vreme</th> 
      <th>Datum</th> 
     </tr> 
    </thead> 
    <tbody> 
     <data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic"> 
    <tr> 
     <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> 
     <td>10</td> 
     <td>$2.35</td> 
    </tr> 
</tbody> 
</table> 

コードを使用しますこの目的のために、私はちょうど行う必要があります

しかし、これはまったく動作しません。

また、MaterialDataTableはWebコンソールに表示されますが、私はそれをどのように利用するかについてはわかりません。

Answer 1

この場合、upgradeElementは複数である必要があります。

componentHandler.upgradeDom(); 

Answer 2

MDLテーブルのこのサポートが削除されたことが表示されます：それはページ全体をアップグレードしてみてください（過去にこれらの方法でのバグがあった）動作しない場合は

componentHandler.upgradeElements(document.getElementById("test-table")); 

を試してみてください。開発者はチェックボックスを作成し、mdkに依存しないようにすることが期待されています。これはgetmdlのウェブサイト（2016年6月13日）の現在利用可能な情報とは対照的ですが、githubに関する問題で議論されています。

ソリューションは、ここではgithubののwikiページ上で提供されています：

https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes