0

テーブルの行を追加および削除する次の jquery コードがあります。1 ページに複数のテーブルがあります。各テーブルの各行には、.row-add と .row-delete の 2 つのクラスがあります。

「.row-add」をクリックして新しい行を追加すると、すべてのテーブルが影響を受けます。つまり、同じページのすべてのテーブルに行が追加されます。クリックしたときに独自のテーブルにのみ適用するにはどうすればよいですか?

Jクエリ:

$(document).ready(function () {
    $('.row-delete').click(function () {
      $(this).closest("tr").remove();
    });

    $('.row-add').click(function () {
      $(this).closest("tr").clone(true).appendTo(".table-comparison");
    });

  });

HTML:

<div id="tab-1" class="tab-section">
                            <div class="container flat rounded-sm bspace">
                          <table cellspacing="0" class="display table-comparison">
                        <thead>
                            <tr>
                              <th><span>Effective Date</span></th>
                              <th><span>Price</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input class="effective-date" type="text" value="01/01/2013"> - <input class="effective-date" type="text" value="06/05/2015">
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="50">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>


              <tr class="price-present">
                                <td><input class="effective-date" type="text" value="07/01/2013"> - <span class="effective-date">Present</span>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="40">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>

                <tr>
                                <td><input class="effective-date" type="text" value="01/01/2011"> - <input class="effective-date" type="text" value="06/30/2012">
                <span class="row-add"></span>
                <span class="row-delete"></span>
                  </td>
                <td>
                $<input class="price" value="30">
                /
                <select>
                  <option>Second</option>
                  <option>Minute</option>
                  <option>Hour</option>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                </select>
                /
                 <select>
                  <option>Day</option>
                  <option>Week</option>
                  <option>Biweek</option>
                  <option>Month</option>
                  <option>Quarter</option>
                  <option>Year</option>
                </select>
                <span class="row-add"></span>
                <span class="row-delete"></span>
                </td>                           
                </tr>




                        </tbody>
                    </table>
                      </div>
                        </div>
4

2 に答える 2

0

具体的であるようにしてください...最も近い（ "tr"）すべてのtrを選択しています。

IDまたはクラスを指定して、jqueryを使用してそのIDを選択してください。

于 2012-09-07T14:37:14.810 に答える
0

問題は、jQuery セレクターがクラス属性にあることです。単一のテーブルを参照する場合は、ID で移動する必要があります。

この場合、プログラムでhtmlコードを生成する場合、すべてのテーブルに自動生成されたIDを追加し、クリック可能なすべての行に次のコードを追加するのが最善の方法だと思います:

onclick="addrow(table_id)"

ここで、table_id はテーブルの自動生成 ID です。それで：

function addrow(table) {$(table).closest("tr").clone(true).appendTo(".table-comparison");}

.table-comparison も id への切り替えを避ける必要があることに注意してください。ただし、コードの詳細はわかりません!

お役に立てれば！

編集: コードを生成しない場合は、次のような bind 関数を使用することをお勧めします。

$("p").bind("click", function(event){

このようにして、イベントの送信者に事後アクセスできます。あなたの場合、あなたは次のように書くことができると思います：

$(".row-delete").bind("click", function (event) {
    event.target.closest("tr").remove();
    });

$(".row-add").bind("click", function (event) {
    event.target.closest("tr").clone(true).appendTo(".table-comparison");
    });

出典: JQuery ドキュメント

于 2012-09-07T14:39:16.030 に答える