1

私はこの例を実装した私のウェブサイトでマテリアル デザイン ライトを使用しています: 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>

私の質問は、テーブルのチェックボックスを処理する方法です。それらはクラスによって追加されます: .mdl-data-table--selectable

それらのIDまたはクラスがないため、JavaScriptまたはSQLサーバーでそれらを使用する方法は何ですか(実装しようとしている行を削除します)

4

3 に答える 3

3

それらがjquery onメソッドでクリックされているかどうかを確認できます.なぜ通常の .click を使用しないのですか? Jquery のドキュメントは、それを完璧に説明しています。

私がどのようにそれを行ったかを説明する前に、私の説明の下ですぐに遊ぶことができるスニペットを用意します.

私は基本的に検査要素を使用してテーブル構造を調べましたが、次のようになりました

<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 の親と子のメソッドを使用すると、クリック イベント リスナーで次のコードを使用してすべてのテーブル データの内容を読み取るなど、多くのことを実現できます。

 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>$2.90</td>

または、このように特定の子のコンテンツを確認できます

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

secondChildContent がコンテンツを返す場所。eq (子の後の 1 つ) の値は、必要な子の番号にいつでも変更できます。次の場合、secondChildContent は「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>

于 2015-09-21T20:30:35.310 に答える
1

チェックボックスが選択されている場合、tr は Material Design Lite で「チェックされている」クラスを取得します。したがって、jquery は次のようになります。

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

更新: クラス「mdl-data-table--selectable」が廃止されていることを読んでください...これはgithubの記事です

于 2016-11-29T12:08:58.920 に答える
1

この 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: 項目の OnClickListener を設定する

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

これで、テーブル アイテム リスナーがすべて設定されました。

于 2016-12-10T03:33:43.737 に答える