Material Design - 单击表格行复选框时创建操作

Question

我正在使用材料设计，现在我正在尝试实现一个可选择的表格。当单击复选框表行时，我需要运行一个操作，我尝试使用 jquery 执行此操作但不起作用。

我的桌子是这样的：

<table id="budget-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
                  <thead>
                    <tr>
                      <th class="mdl-data-table__cell--non-numeric"></th>
                      <th class="mdl-data-table__cell--non-numeric">Referência</th>
                      <th class="mdl-data-table__cell--non-numeric">Descrição</th>
                      <th class="mdl-data-table__cell--non-numeric">Alpha</th>
                      <th class="mdl-data-table__cell--non-numeric">Material</th>
                      <th class="mdl-data-table__cell--non-numeric">Qtt</th>
                      <th class="mdl-data-table__cell--non-numeric">Entrega</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($budgetLines as $key => $value)
                      <tr data-id="{{$value->u_bistamp}}">
                        <td></td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
                        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>

在表格标签中，我添加了类mdl-data-table--selectable，使该表格行可选择，并在每个tr中添加此代码：

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox,MaterialRipple">
   <input type="checkbox" class="mdl-checkbox__input">
   <span class="mdl-checkbox__focus-helper"></span>
   <span class="mdl-checkbox__box-outline">
      <span class="mdl-checkbox__tick-outline"></span>
   </span>
   <span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple">
       <span class="mdl-ripple is-animating" style="width: 103.823px; height: 103.823px; transform: translate(-50%, -50%) translate(18px, 18px);"></span>
   </span>
</label>

现在我想在单击复选框时在 jQuery 中创建一个动作，但我不能这样做，也不知道为什么。

    function checkLineBudget()
    {
      $("#budget-table tbody tr td .mdl-checkbox").click(function (e)
      {
        alert("Works");
      });
    }

我该怎么做？

Answer 1

您可以简单地监听行更改事件：

$('#budget-table tbody tr').on('change', function(e) {
     var rowIndex = $(this).closest("tr").index();
     console.log(rowIndex);
})

$('#budget-table tbody tr').on('change', function(e) {
    var rowIndex = $(this).closest("tr").index();
    console.log(rowIndex);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>


<table id="budget-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
    <thead>
    <tr>
        <th class="mdl-data-table__cell--non-numeric"></th>
        <th class="mdl-data-table__cell--non-numeric">Referência</th>
        <th class="mdl-data-table__cell--non-numeric">Descrição</th>
        <th class="mdl-data-table__cell--non-numeric">Alpha</th>
        <th class="mdl-data-table__cell--non-numeric">Material</th>
        <th class="mdl-data-table__cell--non-numeric">Qtt</th>
        <th class="mdl-data-table__cell--non-numeric">Entrega</th>
    </tr>
    </thead>
    <tbody>
    <tr data-id="{{$value->u_bistamp}}">
        <td></td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
    </tr>
    <tr data-id="{{$value->u_bistamp}}">
        <td></td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_ref}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_design}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_alpha}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_material}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_qtt}}</td>
        <td class="mdl-data-table__cell--non-numeric">{{$value->u_data_entrega}}</td>
    </tr>
    </tbody>
</table>