处理 mdl table 复选框

Question

我在我的网站上使用 material desigin lite 我已经实现了这个例子： http://www.getmdl.io/components/index.html#tables-section

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Material</th>
          <th>Quantity</th>
          <th>Unit price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
          <td>25</td>
          <td>.90</td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
          <td>50</td>
          <td>.25</td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
          <td>10</td>
          <td>.35</td>
        </tr>
      </tbody>
    </table>

我的问题是如何处理 table 中的复选框，它们由 class 添加：.mdl-data-table--selectable

它们没有 Id 或 class 那么在 javascript 或 sql 服务器中使用它们的方法是什么（删除我正在尝试实现的行）

Answer 1

您可以使用 jquery on 方法检查它们是否被点击，为什么不使用正常的 .click 是因为 event delegation。 Jquery 文档对此进行了完美的解释。

在我解释我是如何做到的之前，我将有一个片段，你可以在我的解释下立即玩。

我主要是使用 inspect element 查看 tables 结构，它看起来像这样

<tr>
    <td>
        <label>clickable checkbox code</label>
    </td>
    <td>Acrylic</td>
    <td>25</td>
    <td>.90</td>

有了这些信息，我们可以做很多事情。我个人用这个来听点击。

$(document).on("click",".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {  /* Code here*/ });

并且使用jquery parents & children方法我们可以实现很多，比如在我们的点击事件监听器中使用以下代码读取所有table数据的内容

 foo = $(this).parents().eq(2).children().text();

或者我们也许可以删除整行？

$(this).parents().eq(2).fadeOut();

那会做的是，使用 "this" 作为参考查看已单击的复选框。然后去升级并删除一整行。

<tr><!-- eq 2 -->
   <td> <!-- eq 1 -->
        <label>clickable checkbox code</label>
   </td>

   <td>Acrylic</td>
   <td>25</td>
   <td>.90</td>

或者我们可以像这样检查特定 child 的内容

 var secondChildContent = $(this).parents().eq(2).children().eq(2).text();

其中 secondChildContent 将是 return 内容。您可以随时将 eq（children 之后的那个）值更改为您想要的 child 数字。在以下情况下，secondChildContent 将 return "Acrylic"

<tr>
<td> <!-- eq 1 -->
    <label>clickable checkbox code</label>
</td>

<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>.90</td> <!-- eq 4 -->

$(document).ready(function() {

  $(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {

    //Removing row
    $(this).parents().eq(2).delay(500).fadeOut(300);

    var secondChildContent = $(this).parents().eq(2/*child number*/).children().eq(2).text();
    var allChildrenContent = $(this).parents().eq(2).children().text();
    var parentID = $(this).parents().eq(2).attr('id');

    //Removing table on click of first checkbox
    if (parentID == "header") {
      $("#mdlTable").fadeOut(1000);
      $("#log").html("<b>Table removed!</b>");
    } else {
      //Don't pay attention to this
      $("#log").html(
        "<b>Second child content is: </b>" + secondChildContent +
        "<br><b>All children content is: </b>" + allChildrenContent
      )
    }

  });

});

#log,
#mdlTable {
  margin: 1% 1% 1% 1%;
}

<!DOCTYPE html>
<html>

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

<body>
  <table id="mdlTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
      <tr id="header">
        <th class="mdl-data-table__cell--non-numeric">Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
        <td>25</td>
        <td>.90</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
        <td>50</td>
        <td>.25</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>.35</td>
      </tr>
    </tbody>
  </table>
  <div id="log"></div>
</body>

Answer 2

选中复选框后，tr 将获得 class "is-checked" 和 Material Design Lite。所以你的 jquery 可以是这样的：

$("table").find("tr.is-checked").each(function(){
        // Do some stuff!
    });

更新：刚读到 class "mdl-data-table--selectable " 正在弃用... This is the article on github

Answer 3

您可以使用这个 OnClick API 函数。它使用类似 Android onClickListener，但它用于 JavaScript.

TablesOnClickListener = function() {
var fun;
this.setOnClickListener = function(listener) {
    fun = listener;
    $(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
        //$(this).parents().eq(2).delay(500).fadeOut(300);
        var secondChildContent = $(this).parents().eq(2 /*child number*/ ).children().eq(2).text();
        var allChildrenContent = $(this).parents().eq(2).children().text();
        var parentID = $(this).parents().eq(2).attr('id');
        fun({
            sen: secondChildContent,
            text: allChildrenContent,
            id: parentID
        });
    });
}

使用方法：

第 1 步：创建新的 TablesOnClickListener

var tocl = new TablesOnClickListener()

第 2 步：设置 Item OnClickListener

tocl.setOnClickListener(function(data){
      console.log(data);
    });

现在您的表格项目侦听器已全部设置好！

处理 mdl table 复选框

handle mdl table check box

javascript

html

css

material-design-lite