테이블에서 올바른 'td : nth-child (1)'값을 얻으려고 시도합니다.

Question

일부 JQuery 기본 사항을 배우고 있으며이 특정 상황을 잘 모르고 있습니다. 각 행의 끝에 삭제 단추가있는 기본 테이블이 있고 '삭제'단추를 클릭 한 행에 따라 열 1의 값을 인식하도록 JQuery 코드를 가져 오려고합니다. 그것은 내가 실제로있는 행에 상관없이 첫 번째 행의 가치를 계속 제공합니다.

다음은 테이블 내 코드입니다 :

 <table id="DemoTable"> 
     <thead><tr><th>Product</th><th>Price</th></tr></thead> 
     <tr><td>Sirloin Steak 10 oz.</td><td>8.77</td><td><input type="submit" value="Delete" /></td></tr> 
     <tr><td>Filet Mignon 8 oz.</td><td>14.50</td><td><input type="submit" value="Delete" /></td></tr> 
     <tr><td>Redi-Grill 5 oz.</td><td>1.55</td><td><input type="submit" value="Delete" /></td></tr> 
     <tr><td>San Marco Stuffed Shells</td><td>.35</td><td><input type="submit" value="Delete" /></td></tr> 
     <tr><td>Sliced Cheese Yellow</td><td>.10</td><td><input type="submit" value="Delete" /></td></tr> 
    </table> 

그리고 여기 JQuery와 섹션 : 어떤 도움

이

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('form').submit(function() { 
     var itemName = $('td:nth-child(1)', this).html(); 
     return confirm('Are you sure you want to delete ' + itemName + '?'); 
    }); 
    }); 
</script> 

감사합니다!

Answer 1

귀하의 코드는 형태의 제출 이벤트를 실행하면 this를 사용할 때 그래서 양식 자체보다는되는 클릭 된 특정 버튼입니다. 다음 버튼과 같은 행에있는 TD를 얻을 수 있기 때문에, 삭제 버튼 클릭 이벤트를 처리하십시오 :

$('#DemoTable input[type="submit"]').click(function() { 
    var itemName = $(this).closest("tr").children().eq(0).html(); 
    return confirm('Are you sure you want to delete ' + itemName + '?'); 
}); 

데모 : 양식이 다음 제출되는하지만 http://jsfiddle.net/nnnnnn/VxWUJ/

주 삭제할 값을 가지고 뭔가를 할 필요가 있습니다 (예 : 양식 내의 숨겨진 필드에 넣기). 질문에 나머지 양식을 표시하지 않지만 삭제 단추 만있는 양식 요소처럼 보입니다.

Answer 2

시도 :

$('form').submit(function (e) { 
    var itemName = $(e.target).parents('tr').children(":first-child").html(); 
    return confirm('Are you sure you want to delete ' + itemName + '?'); 
});