Jquery 동적 테이블의 요소 선택

Question

JSON 형식으로 서버에서 보낸 데이터로 채워지는 테이블 템플릿이 있습니다.

<table id="mangeDataTable" class="tablesorter"> 

      <thead> 
       <tr> 
        <th >S.No</th> 
        <th >Manga</th> 
        <th >Status</th> 
        <th > Edit</th> 
        <th> Delete</th> 

      </tr> 
      </thead> 
      <tbody> 
      <% for (var i = 0; i < mangaData.length; i++) { %> <% var item =mangaData[i]; %> 
      <% var count=i%> 

       <tr> 
       <td><%= ++count%></td> 
       <td><%= item.text%></td> 
       <td><%= item.status%></td> 
       <input id="mangaName" type="hidden" name="text" value="<%= item.text%>"/> 
       <td><a href="#edit-box" class="edit-window" title="<%= item.text%>" >Edit</a></td> 
       <td><a href="#delete-box" class="delete-window" title="<%= item.text%>" >Delete</a></td> 

      </tr> 
      <% } %> 
      </tbody> 
     </table> 

을 위의 템플릿을 사용하여 내가 아래 그림과 같이 테이블을 만들 수 있어요 : 다음과 같이 템플릿 코드는

문제 기능을 삭제 편집 &에 . 편집/삭제를 클릭하면 행 (만화 이름, 상태)의 데이터가 선택됩니다. 지금까지 앵커 태그의 title 속성에 이름을 설정하고 jquery att()를 통해 추출했습니다.

var mangaName=$(this).attr("title"); 

그러나 이것은 일을하는 방법이 아닙니다. 제가 선택한 임시 해결책 일뿐입니다. 그것을하는 방법에 대한 제안?

Answer 1

Rikesh을

,

jQuery의 .closest()은 가장 친한 친구입니다.

$('#mangeDataTable').on('click', '.edit-window', function(){ 
    var row = $(this).closest('tr'); 
    var mangaName = row.find('td').eq(1).text(); 
    //then do whatever is necessary to edit 
}).on('click', '.delete-window', function(){ 
    var row = $(this).closest('tr'); 
    var mangaName = row.find('td').eq(1).text(); 
    //then do whatever is necessary to delete 
}); 

<tr> 내부

부동 <input> 아니지만 <td>에 아마 좋은 생각이 아니다. 브라우저가 어떻게 이것을 처리 할 것인지는 불확실합니다. 그리고 적어도 일부 브라우저에서는 엘리먼트가 주소를 알 수 없을 것이라고 추측합니다.

Answer 2

이미 jQuery를 사용하고 있으므로 datatables 플러그인을 사용하여 데이터를 표시하고 수정하는 것이 좋습니다. 설정 및 사용이 비교적 쉽습니다.

메인 페이지 : 예를 들어 여기에 귀하의 설명을 일치와 http://datatables.net/examples/

는 : http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

Answer 3

나는 <tr>의 데이터 속성에 제목을 넣어 것 다음 closest를 찾을 수 있습니다.

다음

<tr data-title="<%= item.text %>"> 
    <!--...--> 
</tr> 

당신의 편집과 같은 제목 찾을 수있는 핸들러를 삭제 : 당신의 HTML 템플릿은 다음과 같이 보일 것이다

var title = $(this).closest('tr').data('title'); 
// Or even $(this).closest('[data-title]').data('title') for more future-proofing 

그런 다음 당신이 편집에 title 속성을 사용하여에 대한 링크를 삭제할 수 있습니다 그들의 소기의 목적 (즉, 사용자에게 링크가하는 일에 대한 약간의 추가 정보를 제공하기 위해) :

<td> 
    <a ... title="Edit <%= item.text%>">Edit</a> 
</td> 
<td> 
    <a ... title="Delete <%= item.text%>" >Delete</a> 
</td>