Javascript MDL表检索数据检查值

我正在使用MDL库的表。

但是没有文档可以让我检索有关的检查值

我只找到了这个解决方案，但根本没有帮助：

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

var复选框=document.getElementById（'team-table-id'））
.querySelector（'tbody'）.queryselectoral（'.mdl-checkbox__输入'）；
对于（变量i=0；i

如何为表行的复选框/输入赋值

如何检索单个选中值

---

如何处理“全选”事件并获取所有行的数据？

根据MDL的版本，查看在何处提供了多个解决方案（解决方案）

好的，我没有找到解决方案。 所以我自己做了一个临时的：

1） 为tr分配一些类，以便在检查事件发生时可以找到它

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

捐款发票
捐赠名称
捐款价格
I-20170419120440
一些捐款的名字
$2.90
C-20170419120454
另一个
$1.25

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

window.findAncestor=（el，cls）=>{
而（（el=el.parentElement）和&！el.classList.contains（cls））；
返回el；
}
让复选框=document.getElementById（'team-table-id'））
.querySelectorAll（'.mdl-checkbox__输入'）；
对于（变量i=0；i

请随便推荐一个合适的

UPD: 这种方法没有错误，可以删除所有检查的值，因此我将其标记为“已解决”。

我遵循这一点（解决方法）

在

window.onload

上，我将

onclick

属性添加到所有复选框中，以调用函数

getCheckValue（this）

，该函数遍历

dom

以获取

tr

中每个

td

的

innerHTML

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
    }   

    }

}

window.onload=function（）{
var checkAll=document.getElementsByClassName（'mdl-checkbox\uuu输入'）
对于（var i=0；i