1

次のようなテーブルがあります。

<table id="tblBranchCoverage" class="hideOnLoad" width="100%">
    <tr class="coverageRow" style="cursor: pointer;">
        <td class="countyCovered" width="115px">
            <label class="branchCountyCovered coverageDisplay">Douglas</label>
            <input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Douglas"><br>
            <input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"><br>
            <input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel">
        </td>
        <td class="stateCovered" width="30px">
            <label class="branchStateCovered coverageDisplay">GA</label>
            <input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2">
        </td>
        <td class="zipsCovered">
            <label class="branchZipsCovered coverageDisplay">30122, 30133, 30134, 30135, 30154, 30187</label>
            <textarea class="edit editBox editZips" style="display: none;" cols="100">30122, 30133, 30134, 30135, 30154, 30187</textarea>
        </td>
    </tr>
    <tr class="coverageRow">
        <td class="countyCovered" width="115px">
            <label class="branchCountyCovered coverageDisplay">Forsyth</label>
            <input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Forsyth"><br>
            <input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"><br>
            <input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel">
        </td>
        <td class="stateCovered" width="30px">
            <label class="branchStateCovered coverageDisplay">GA</label>
            <input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2">
        </td>
        <td class="zipsCovered">
            <label class="branchZipsCovered coverageDisplay">30028, 30040, 30041</label>
            <textarea class="edit editBox editZips" style="display: none;" cols="100">30028, 30040, 30041</textarea>
        </td>
    </tr>
</table>

テーブルの行を反復処理し、「編集」クラスの要素を持つ行を見つけます (最大で 1 つだけですが、すべての行にラベルが表示され、入力が非表示になる可能性があります)。 「表示：なし」に設定されています。その行が見つかったら、.edit 要素を非表示にしてラベルを表示する必要があります (その時点でスタイルは「display: none」に設定されます)。

私はこの文脈の中でこれをやっています:

$('#tblBranchCoverage').on('click', 'tr', function() {

したがって、基本的に、ユーザーが行をクリックすると、テーブル内の他のすべての行で .edit 要素が非表示になり、ラベルが表示され、クリックされた行の編集要素が表示され、ラベルが非表示になります。

私がそれを機能させるのに最も近いのはこれです：

    $(this).parent().find('tr td').each(function() {
        $(this).find('.edit').hide();
        $(this).find('.coverageDisplay [style*="display: none"]').show();
    });
    $(this).find('.coverageDisplay').fadeOut(200);
    $(this).find('.edit').delay(200).fadeIn(200);
});

クリックされた行はすべての要素を非表示にするため、これは実際には「閉じる」わけではありません。

私はこれを2時間いじっています。私は本当にいくつかの助けが大好きです!

ありがとう。

[編集] リクエストに応じて、ここにjsFiddleがあります。

4

4 に答える 4

4

jQuery のsiblings()メソッドを使用して他の<tr>要素を取得できます: http://api.jquery.com/siblings/

$('#tblBranchCoverage tr').click(function() {
    $(this).find('.edit').fadeIn(200);
    $(this).find('label').fadeOut(200);
    $(this).siblings('tr').find('label').show();
    $(this).siblings('tr').find('.edit').hide();
});

すでに編集モードになっている行をクリックしても、非表示や再フェードしないようにするには、この方法をお勧めします。

于 2013-01-24T21:25:08.173 に答える
1

このように？

$('#tblBranchCoverage').on('click', 'tr', function() {

  // hide all other .edit's and show all other labels
  $('#tblBranchCoverage tr').not(this).find('.edit').hide();
  $('#tblBranchCoverage tr').not(this).find('label').show();

  // hide this row's label and show this row's edit div
  $('label', this).hide();
  $('.edit', this).show();
});
于 2013-01-24T21:14:50.893 に答える
0

これは、あなたが言及したように機能するスニペットです。

var $tbl = $('#tblBranchCoverage'),
    $lables = $tbl.find('td .coverageDisplay');
    $editables = $tbl.find('td .edit'),
$tbl.on('click', 'tr', function() {
  var $this = $(this);
  $editables.hide();
  $lables.show();
  $this.find('.coverageDisplay').fadeOut(200);
  $this.find('.edit').delay(200).fadeIn(200);
});

ここにjsFiddleへのリンクがありますhttp://jsfiddle.net/greenrobo/JsGrx/

于 2013-01-24T21:27:34.330 に答える
0

また、現在選択されている行の onclick トリガーを無効にすることもできます。そのための私の実装は次のとおりです。

http://jsfiddle.net/cH6Ba/15/

editRow() {

    $('#tblBranchCoverage .edit').hide(); // hide all edits. 
    $('#tblBranchCoverage label').show(); // show all labels. 
    $('#tblBranchCoverage tr').on('click', editRow); //rebind all events

    $(this).find('.edit').delay(200).fadeIn(200); // show our inputs
    $(this).find('label').delay(200).fadeOut(200); // hide our labels
    $(this).closest('tr').off('click', editRow); //unbind trigger on current row. 
};

$('#tblBranchCoverage tr').on('click', editRow);

ジェフのソリューションもこれをかなりきれいに実現します。

于 2013-01-24T22:24:24.193 に答える