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

如何为表行的复选框/输入分配值？

如何检索单个选中的值？

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

Answer 1

好的，我没有找到解决方案。所以我暂时自己动手：

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

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>$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有bug并且可以处理所有已检查的值，因此我将此标记为＆＃34;已解决＆＃34;。

Answer 2

查看https://github.com/google/material-design-lite/issues/1210根据MDL版本提供多种解决方案（解决方法）

Answer 3

我正在关注此事（解决方法）

在window.onload上我将onclick属性添加到所有复选框以调用函数getCheckValue(this)，此函数遍历dom以获取每个innerHTML td 1}}在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表检索数据检查值

3 个答案: