Question

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

Labels

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

没有Id或类，所以在javascript或sql server中使用它们的方式是什么（删除我正在尝试实现的行）

Answer 1

您可以检查他们是否使用jquery on方法点击，为什么我没有使用正常.click是因为event delegation。 Jquery文档完美地解释了这一点。

在我解释我是如何做到这一点之前，我会有一个片段，您可以根据我的解释立即播放。

我基本上使用了inspect元素来查看表结构，它看起来像这样

<tr>
    <td>
        <label>clickable checkbox code</label>
    </td>
    <td>Acrylic</td>
    <td>25</td>
    <td>$2.90</td>

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

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

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

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

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

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

这样做，看看点击的复选框，使用＆＃34;这个＆＃34;作为参考。然后去升级并删除整行。

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

   <td>Acrylic</td>
   <td>25</td>
   <td>$2.90</td>

或者我们可以检查这样的特定孩子的内容

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

其中secondChildContent将返回内容。您始终可以将eq（子项后面的一个）值更改为所需的子编号。在下面的例子中，secondChildContent将返回＆＃34; Acrylic＆＃34;

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

<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>$2.90</td> <!-- eq 4 -->

＆＃13;

$(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
      )
    }

  });

});

＆＃13;

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

＆＃13;

<!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>$2.90</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
      </tr>
      <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
      </tr>
    </tbody>
  </table>
  <div id="log"></div>
</body>

＆＃13;

Answer 2

当选中一个复选框时，tr会得到类＆＃34;被检查＆＃34;使用Material Design Lite。所以你的jquery可以是这样的：

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

更新：只需阅读该课程＆＃34; mdl-data-table - selectable＆＃34;正在弃用... 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);
    });

现在您的Tables Item Listener已全部设置好了！

处理mdl表复选框

3 个答案: