jQuery를 - 보여 테이블에 여러 행의 레이블과 입력을 숨기는 방법을

Question

I는 다음과 같습니다 테이블이 있습니다

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

내가 (행을 찾아 테이블의 행을 반복 할 필요를 최대 하나만 존재할 것입니다. 그러나 "display : none"으로 설정된 클래스 "edit"가있는 요소가있는 모든 행에 레이블이 표시되고 숨겨진 입력이있을 수 있습니다. 해당 행이 발견되면 .edit 요소를 숨기고 레이블을 표시해야합니다 (이 때 스타일은 "display : none"으로 설정됩니다).

나는이 컨텍스트 내에서이 일을 해요

: 행에 사용자가 클릭 테이블의 다른 모든 행이 숨겨진 .edit 요소를 가지고 때

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

그래서, 기본적으로 라벨 표시와에 클릭 된 행 편집 요소가 표시되고 레이블이 숨겨집니다.

나는 그것이 작업에 들어 왔 가장 가까운 이것이다 :

정말로 "가까이"전혀, 숨겨진 요소를 모두 얻을 수에 클릭 행 이후 아니다

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

당신은 다른 <tr> 요소에서 얻을 jQuery의 siblings() 방법을 사용할 수 있습니다

: 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); 
}); 

는

Answer 4

알면 또한 현재 선택한 행의 온 클릭 트리거를 비활성화 할 jsFiddle http://jsfiddle.net/greenrobo/JsGrx/에 대한 링크입니다.

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

제프의 솔루션

도 꽤 깔끔하게이를 수행 : 여기에 내 구현이다.