2013-05-15 3 views
2

샘플 HTML (더 많은 행 중 하나만 포함).동일한 행에있는 앵커 태그를 클릭하면 테이블에서 같은 행의 입력 태그를 선택하십시오.

<table id="ctl00_ContentPlaceHolder1_categoryTable" class="categoryTable sortAsc editInputs" border="0"> 
    <tbody> 
    <tr> 
    <td>8</td> 
    <td> 
    <input name="ctl00$ContentPlaceHolder1$ctl17" type="text" value="307349_335692806541952_16061425_n.jpg" readonly="readonly" /> 
    </td> 
    <td><input name="ctl00$ContentPlaceHolder1$ctl18" type="text" value="key1 " readonly="readonly" /></td> 
    <td>3/28/2013</td> 
    <td>.jpg</td> 
    <td>28120</td> 
    <td><a href="download.aspx filename=307349_335692806541952_16061425_n.jpg&type=image">307349_335692806541952_16061425_n.jpg</a></td> 
    <td> 
    <a href="javascript:void(0)" class="editLinkClass">Edit </a><a href="javascript:void(0)" class="deletetLinkClass"> Delete</a><a href="javascript:void(0)" class="updateLinkClass" style="display:none;">Update</a><a href="javascript:void(0)" class="cancelLinkClass" style="display:none;"> Cancel</a> 
    </td> 
    <tr> 
    </tbody> 

내 자바 스크립트

$(document).ready(function() { 
      console.log("document ready") 
      $(".categoryTable tr td a").click (function (event) { 
       console.log($(this).text() + "click detected"); 
       if ($(this).text() === "Edit ") {//compare with "Edit " not "Edit" 
        console.log("Edit"); 
        console.log($(this).parent().parent().children('td input').text()); 
        $(this).siblings(".deletetLinkClass").attr("style", "display:none"); 
        $(this).siblings(".updateLinkClass").attr("style", "display:;"); 
        $(this).siblings(".cancelLinkClass").attr("style", "display:;"); 
        $(this).attr("style", "display:none") 
       } 
       else 
        console.log("no EDit"); 
      }); 
     }); 

내가 뭘하려고 오전 입력 같은 행 tr 태그하지만 같은 행에서 앵커 태그의 클릭에 다른 td을 선택합니다. 다음 성공한 jQuery 문을 여러 가지 조합을 시도했다. 도와주세요. $(this).parent().parent().children('td input').text() 여기 this은 클릭 된 앵커 태그를 나타냅니다. 더 명확하게하기 위해 테이블의 모든 입력 태그를 선택하지 않고 같은 행에있는 태그 만 선택하려고합니다.

답변

2

parents()find()을 사용한다.

$(this).parent().parent().children('td input').text(); 
              //--^^^^^^---here 

시도 .., 입력 값을 얻을 val()하지 text()를 사용이

var inputs=$(this).parents('tr').find('input'); 
$.each(inputs,function(){ //<---- loop since you have multiple input 
    console.log($(this).val()); //.val() since val() is used to get the input value.. 
}) 

또는 closest()find()을 사용.

var inputs=$(this).closest('tr').find('input'); 

지정된 행의 입력을 찾기 위해 코드를 아래에보십시오

$(this).closest('tr').find('td input').text() 
+0

+1, da 가장 좋은 대답은 여기에 있습니다 :-) – Stano

+0

@ Stano thanks .. :) ... – bipen

+0

그것도 효과가 있습니다 ... 나는 또한 텍스트를 생각했습니다() 입력 태그에서 작동하지 않아서 $를 사용했습니다. (this) .prop ("value"). – thunderbird

0

를 사용하여 :

2

당신은 그것을 이런 식으로 할 수있는 상황

var inputs = $('td input', $(this).closest('tr')).val(); 

working fiddle here

+1

여기에 입력 값을 가져 오는 것이 좋습니다. text()'는 전혀 작동하지 않습니다 – bipen

+1

죄송합니다. 그 사실을 알지 못했습니다 .. 내 대답을 편집했습니다. 지적 해 주셔서 고마워요. :) –

+0

@bipen yea 나는 그것을 알아 냈다. – thunderbird