MDL 表检索数据检查值答案

【问题标题】：MDL table retrieve data checked valuesMDL 表检索数据检查值
【发布时间】：2017-07-08 15:35:45
【问题描述】：

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

我怎样才能为表格行的复选框/输入赋值？

如何检索单个选中的值？

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

【问题讨论】：

标签： javascript material-design material-design-lite

【解决方案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">....

请随时提出正确的建议。

统一更新： 这种方法没有错误并且可以处理所有检查的值，因此我将其标记为“已解决”。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我正在关注这个（解决方法）

在window.onload 上，我将onclick 属性添加到所有复选框以调用函数getCheckValue(this)，此函数遍历dom 以获取td 中每个td 中的innerHTMLtr

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

【讨论】：