MDL table retrieves data, verified values

Question

I am using MDL lib tables. https://getmdl.io/components/index.html#tables-section

But there are no documents how I can get the verified values.

I found only this solution, but it did not help:

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?
        });
    }

How can I assign a value to a checkbox / input of table rows?

How to get individual verified values?

How can I handle the “select all” event and get all row data?

Answer 1

Well, I did not find a solution. Therefore, I do my for temporary:

1) Assign some class to tr, so it can be found when a validation event event

2) tr. smth,

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

, .

UPD: dnt 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