MDL table 检索数据检查值

Question

我正在使用 table 的 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?
        });
    }

如何为 table 行中的 checkbox/input 行赋值？

如何检索单个选中的值？

如何处理 "select all" 事件并获取所有行的数据？

Answer 1

查看 https://github.com/google/material-design-lite/issues/1210，其中根据 MDL 的版本提供了几种解决方案 (work-around)

Answer 2

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

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

2) 为 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>.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>.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">....

请随时提出合适的建议。

更新： 这种方法没有错误并且可以处理所有检查的值，所以我将其标记为 "solved".

Answer 3

我正在关注这个 (work-around)

在 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 用于演示

MDL table 检索数据检查值

MDL table retrieve data checked values

javascript

material-design

material-design-lite