2011-05-16 9 views
1

이 문제는이 이전 질문과 관련이 있습니다. link. 자, 제가하려는 것은 반대의 일을하는 것입니다. 여기에 동적 테이블 (행을 추가 및 삭제할 수 있음)이 있고 테이블의 최신 사용 (버튼에 의한 트리거)에 사용자가 입력 한 데이터는 가져와야하며 동일한 테이블에 게시되어야합니다 (같은 버튼은 클릭). 제가하고 싶은 것은 내가 다시 버튼을 클릭하면,이 이전에 입력 된 데이터를 다시 게시 될 것입니다 이제테이블 행에 데이터를 동적으로 추가하십시오.

$('#tableSearchMainAccount1 tr').each(function(){ 
var td = '';     
    if ($(this).find("td:first").length > 0) { // used to skip table header (if there is)    
     $(this).find('option:selected').each(function(){ 
     td = td + $(this).text()+ ','; 
     }); 
    td = td + $(this).find('input').val(); 
    filt[ctr]=td; 
    ctr += 1;   
    } 
}); 
alert (filt); //alert output like name,equals,ann,age,equals,11 

, 여기

내가 내 동적 테이블에서 데이터를 가져 오기 위해 사용되는 코드입니다 내 동적 테이블에. 테이블을 다시 표시 할 때 테이블에 사용자 입력이 테이블에 표시해야한다

<table> <tr><th>field</th><th>comparison</th><th>value</th></tr> 
<tr> 
    <td> 
     <select style="width:5em;" class="field"> 
     <option>name</option> 
     <option>age</option> 
     <option>sex</option> 
     </select> 
    </td> 
    <td> 
     <select style="width:5em;" class = "comp"> 
     <option>equals</option> 
     <option>starts with</option> 
     <option>not equal to</option> 
     </select> 
    </td> 
    <td><input type="text" class = 'value'></td> 
    <td><img class="add" src="css/images/add.png" /></td> // this is used to add new row 
</tr> 
</table> 

마지막 데이터 :

내 표는 다음과 같습니다 무언가이다. 동적 테이블에 데이터를 추가하려면 어떻게합니까?

편집 : 버튼을 클릭하면 이 대화 상자가 내 동적 테이블을 포함하고 매번 사용자가 대화 상자를 닫습니다, 그 테이블의 모든 행은 사용자가 입력 한 데이터와 같은 사라질 것이다 열립니다. 이미 테이블에 입력 된 최신 데이터를 보유하는 변수를 만듭니다. 그래서 버튼이 다시 클릭되면 사용자가 마지막으로 입력 한 데이터를 생성 또는 표시하도록합니다. 출력은 최신 입력 데이터와 같아야합니다.

+0

jayAnn, po가 되겠습니까? http://jsfiddle.net에서 바이올린을 만들 수 있습니다 - 명확히하기 위해, 그 HTML 코드는 무엇입니까? 동적 테이블입니까? 이 표의 데이터를 다른 곳으로 보내시겠습니까? –

+0

내 브라우저에 문제가 있다고 생각합니다. 그것은 jsfiddle를 보여주지 않을 것입니다. 표의 데이터는 내 필터 용입니다. 나는 서버에서 데이터를 필터링하고 필드, 비교 및 ​​값을 얻기 위해 테이블을 사용하는 프로그램을 작성하고 있습니다. 내 프로그램에서 지금 무슨 일이 있었는지는 완벽하게 필터링 할 수 있지만 다시 searcg 버튼을 클릭 할 때마다 내 선배는 이전 필터에서 사용한 이전 입력 된 데이터를 표시하려고합니다. 그래서 그것은 지금 제 문제입니다. 동적 테이블에 이전 데이터를 추가하는 방법을 모른다. – jayAnn

+0

이 시스템의 작동 방식과 관련된 모든 (프런트 엔드) 코드를 보지 않고 조언하는 것은 매우 어렵습니다. –

답변

3

당신은 버튼 아이디 add했다 가정하면 도움이 될 것입니다 그리고 당신은 마지막에 테이블 행을 추가하고 싶었 :

$('#add').on('click', function() { 
    var $lastTr = $('table tr:last'); 
    $lastTr.clone().insertAfter($lastTr); 
    $('#add', $lastTr).remove(); 
}); 

우리가 마지막 행을 복제하기 위해 .clone를 사용하고 마지막에 그것을 추가 .

바이올린 :http://jsfiddle.net/garreh/w9fXJ/


그리고 당신이 다음 질문있어 선점하기 위해, 여기에 행을 ;-)

$('.remove_row').on('click', function() { 
    $(this).closest('tr').remove(); 
}); 

바이올린을 제거 의 추가가있다 :http://jsfiddle.net/garreh/w9fXJ/1/

+0

을 참조하십시오. 이미 동적 테이블을 만드는 방법을 알고 있습니다. 감사합니다. 내 편집을 참조하십시오. – jayAnn

0

JQuery. prepend 및 JQuery. append

+0

추가에 대해 알고 있습니다. 내 질문은 내 동적 테이블에 데이터를 동적으로 추가하는 방법입니다. 나는 추가 jquery 요소를 추가하는 데 사용되는 것 같아요 ...일치하는 요소 세트의 각 요소의 끝까지. – jayAnn

+0

http://api.jquery.com/prepend/ 및 http://api.jquery.com/append/ – jayAnn

관련 문제