jQuery的 - 如何顯示和隱藏在多行標籤和輸入表中的

Question

我有一個表，看起來像這樣：

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

我需要通過表中的行進行迭代，找到行（最多隻能有一個，但可能是所有行都會顯示標籤並隱藏輸入），其中包含class「edit」的元素設置爲「display：none」。當找到該行時，我需要隱藏.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); 
}); 

並非真正的「親密」可言，因爲這是點擊獲取所有元素隱藏的行。

我一直在搞這個兩個小時。我真的很喜歡一些幫助！

謝謝。

[編輯] 根據要求，這裏是一個jsFiddle。

Answer 1

贊this？

$('#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(); 
}); 

Answer 2

您可以使用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(); 
}); 

你可能更喜歡這種方式，使點擊行中已有的編輯模式下不會隱藏和重新淡化它。

Answer 3

以下是您提到的代碼片段。

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/

Answer 4

剎那間也想禁用當前所選行的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); 

傑夫的解決方案也實現了這個漂亮乾淨。