2

私が書いたjQuery関数があり、追加のテーブル行をslideToggleします。ボタンを含むクリック可能な行の最後にセルがありますが、コンテナー div をクリックすると関数がトリガーされるため、行の任意の場所をクリックすると、新しい行が展開されます。

テーブルの他の部分にチェックボックスやリンクなどを追加する範囲があるため、ボタンがクリックされたときにのみ関数をトリガーする必要があります。

コード：

    var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".extrainfo_container").click(function() {
       $(this).find('.extrainfo').slideToggle(toggleSpeed);
        if ($(this).find('.moreless').text() == collapseText) {
                $(this).find('.moreless').text(expandText)
        }
        else {
        $(this).find('.moreless').text(collapseText);
    }
    });  




<table>   
     <tr>
        <td>Header 1</td>
        <td>Header 2</td>
        <td>Header 3</td>
    </tr>
</table>
<div class="extrainfo_container">
    <table>   
         <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td><div class="moreless">more</div></td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="extrainfo">
                    Extra information.<p />
                    Extra information.<p />
                </div>
            </td>
        </tr>
    </table>
</div>

作業例: http://jsfiddle.net/E22XR/69/

フォーラムを検索しましたが、同様の質問と回答が見つかりましたが、どれもうまくいきませんでした。私がやっていることは何か違う、および/または同じ結果を達成するためのより良い方法があるに違いないと思います-私は自分の関数を書くのはまったく初めてです。

より良い方法がある場合、動的に作成される行がいくつでもある可能性があるため、ID を使用しないことが要件です。

4

1 に答える 1

2

あなたは私が推測するこれを行うことができます。

 var toggleSpeed = 600;
    var expandText = "more";
    var collapseText = "less";
$(".moreless").click(function() {
       $(".extrainfo_container").find('.extrainfo').slideToggle(toggleSpeed);
        if ($(".extrainfo_container").find('.moreless').text() == collapseText) {
                $(".extrainfo_container").find('.moreless').text(expandText)
        }
        else {
        $(".extrainfo_container").find('.moreless').text(collapseText);
    }
    });

編集：複数行のハック

var toggleSpeed = 600;
var expandText = "more";
var collapseText = "less";
$(".moreless").click(function () {
   var detailsRow = $(this).parent().parent().next();
   detailsRow.find('.extrainfo').slideToggle(toggleSpeed);
   if ($(this).text() == collapseText)
      $(this).text(expandText);
   else
      $(this).text(collapseText);
});
于 2012-08-13T12:18:42.807 に答える