Таблица MDL извлекает данные, проверенные значения

Question

Я использую таблицы MDL lib. 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? 
     }); 
    } 

Как я могу присвоить значение CheckBox/ввод строк таблицы на всех?

Как я могу получить одиночные проверенные значения?

Как я могу обработать событие «выбрать все» и получить данные всех строк?

Answer 1

Хорошо, я не нашел решение. Так что я сделать мои собственные для временного:

1) Назначают некоторый класс для т.р., так что он может быть найден при регистрации событий случилось

2) присвоить значение ТР. Это может быть сериализовать значения или то вроде этого

3) слушать проверить событие и получить данные

Markup:

<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">.... 

Пожалуйста, не стесняйтесь предложить право один.

UPD: Этого подход ДНТ есть ошибка и может hanlde всех проверенных значений, поэтому я пометил это как «решено».

Answer 2

Посмотри https://github.com/google/material-design-lite/issues/1210 где несколько решений (обходной) представлены в зависимости от версии MDL

Answer 3

Я следую это (обходного)

На window.onload я добавляю onclick атрибут для всех флажок, чтобы вызвать функцию getCheckValue(this), эту функцию траверс через dom получить innerHTML каждого td в 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 
    } 

    } 

} 

Plunker link для демонстрации