javascript html css material-design-lite

handle mdl table check box

I'm using material desigin lite in my website I have implemented this example: 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>$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>

my question is how to handle the check box in the table , they are added by the class : .mdl-data-table--selectable

there is no Id or class for them so what is the way to use them in javascript or sql server (deleting rows what i'm trying to implement)

Solution

You could check if they're are clicked with a jquery on method, why am not using the normal .click is to because of event delegation. Jquery docs do a perfect job explaining that.

Before I explain how I did it I will have a snippet that you can immediately play with under my explanation.

I basically used inspect element to look at the tables structure and it looked something like this

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

With that information, we can do a lot. I personally used this to listen to clicks.

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

And with jquery parents & children methods we can achieve a lot, like read the content of all the table data with the following code in our click event listener

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

Or we can perhaps delete a whole row?

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

What that would do is, look at the clicked checkbox using "this" as reference. Then go to levels up and remove a whole row.

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

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

Or we can check for the content of a specific child like this

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

Where secondChildContent will be return the content. You can always change the eq (The one after children) value to the desired child number you want. In the following case secondChildContent would return "Acrylic"

<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 -->

$(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>$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>