MDLテーブルはデータチェック値を取得します

Question

私はMDLライブラリのテーブルを使用しています。 https://getmdl.io/components/index.html#tables-section

しかし、どのように私はチェック値を取得することができるドキュメントはありません。

私はこの解決策を見つけたが、これは全く貢献していない：

var checkboxes = document.getElementById('team-table-id') 
     .querySelector('tbody').querySelectorAll('.mdl-checkbox__input'); 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].addEventListener('change', function() { 
      console.log(this) 
      // returns <input type="checkbox" class="mdl-checkbox__input"> 
      // how can I assign and retrieve value to/from this input? 
     }); 
    } 

私はすべてのテーブル行の入力/チェックボックスに値を割り当てることができますどのように？

どのようにして1つのチェック値を取得できますか？

「すべて選択」イベントを処理してすべての行のデータを取得するにはどうすればよいですか？

Answer 1

のバージョンに応じて、提示されています。 だから私は、一時のために自分自身を作る：

1）チェックイベントが

2を起こったとき、それは見つけることができるので、TRさんのためのいくつかのクラスを割り当て）のtrのための値を割り当てます。これは、イベントをチェックして、データ

を取得聞く）こと

3のような値やなめらかにシリアライズすることができます

マークアップ：

<table id="team-table-id" width="100%" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
     <thead> 
     <tr class="row-info" data-value="all"> 
      <th class="mdl-data-table__cell--non-numeric">Donation Invoice</th> 
      <th>Donation Name</th> 
      <th>Donation price</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="row-info" data-value="one more value"> 
      <td class="mdl-data-table__cell--non-numeric">I-20170419120440</td> 
      <td>Some Donation Name</td> 
      <td>$2.90</td> 
     </tr> 
     <tr class="row-info" data-value="another value"> 
      <td class="mdl-data-table__cell--non-numeric">C-20170419120454</td> 
      <td>Anothre</td> 
      <td>$1.25</td> 
     </tr> 
<!--etc...--> 

Javascriptを：

window.findAncestor = (el, cls) => { 
    while ((el = el.parentElement) && !el.classList.contains(cls)); 
     return el; 
} 


let checkboxes = document.getElementById('team-table-id') 
     .querySelectorAll('.mdl-checkbox__input'); 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].addEventListener('change', function() { 
      console.log(findAncestor(this, 'row-info')) 
     }); 
// Returns parent table row, so you can get selected data. 
// For example <tr data-value="some value" class="row-info">.... 

、右の提案するお気軽にどうぞ1。

UPD： このアプローチではバグがあり、チェックされたすべての値を変更することができるので、これを「解決済み」とマークしました。

Answer 2

https://github.com/google/material-design-lite/issues/1210ところ、いくつかの解決策（回避策）を見てくださいは、[OK]を、私は解決策を見つけられませんでしたMDL

Answer 3

私はtr

window.onload=function(){ 
    var checkAll=document.getElementsByClassName('mdl-checkbox__input') 
    for(var i=0;i<checkAll.length;i++){ 
     checkAll[i].setAttribute('onclick','getCheckValue(this)') 
    } 
} 

function getCheckValue(obj){ 

    if(obj.checked){ 
    /*th is checked in thead*/ 
     if(obj.parentElement.parentElement.parentElement.parentElement.nodeName=='THEAD'){ 
     var trs=obj.parentElement.parentElement.parentElement.parentElement.nextElementSibling.children 
     for(var i=0;i<trs.length;i++){ 
      var tds=trs[i].getElementsByTagName('td') 
       for(var j=1;j<tds.length;j++){ 
        console.log(tds[j].innerHTML) 
       } 
      } 
     } 
     else{ 
      /*td inside tbody is checked*/ 
      var tds=obj.parentElement.parentElement.parentElement.getElementsByTagName('td') 
      for(var i=1;i<tds.length;i++){ 
       console.log(tds[i].innerHTML) 
      } 
     } 

    }else{ 
    /* uncheck th checkbox of thead*/ 
    if(obj.parentElement.parentElement.parentElement.parentElement.nodeName!='THEAD'){ 
    obj.parentElement.parentElement.parentElement.parentElement.previousElementSibling.firstElementChild.firstElementChild.firstElementChild.classList.remove('is-checked') 
    obj.parentElement.parentElement.parentElement.parentElement.previousElementSibling.firstElementChild.firstElementChild.firstElementChild.firstElementChild.checked=false 
    } 

    } 

} 

に各 tdの innerHTMLを取得するためにトラバース domを通じて機能 getCheckValue(this)、この関数を呼び出すために

私は、すべてのチェックボックスにonclick属性を追加していwindow.onloadで、この（回避策）を、以下のい

Plunker linkデモ用