AJAX 응답에서 큰 테이블을 업데이트하는 방법은 무엇입니까?

AJAX를 사용하여 다음의 큰 테이블 (10 행 × 30 열)의 모든 셀을 어떻게 업데이트합니까? 정상적으로 작동되고, 다음 스크립트를 사용AJAX 응답에서 큰 테이블을 업데이트하는 방법은 무엇입니까?

<td id="r0c0">puts @table[0][0]</td>

및 다음

<table> 
    <tr> 
    <td>puts @table[0][0]</td> 
    <td>puts @table[0][1]</td> 
    ... 27 columns go here 
    <td>puts @table[0][29]</td> 
    </tr> 
    ... 8 rows go here 
    <tr> 
    <td>puts @table[9][0]</td> 
    <td>puts @table[9][1]</td> 
    ... 27 columns go here 
    <td>puts @table[9][29]</td> 
    </tr> 
</table>

난, 그것을 특정한 ID를 부여하여 행 0 및 컬럼 0 세포를 업데이트 할 수 있었던

document.getElementById("r0c0").innerHTML = '<%= @new_r0c0_value %>'

하지만 테이블이 매우 큽니다 (300 셀) 나는 특정 ID로 각 테이블의 셀을 식별하지 않고 값 배열에서 300 개의 셀을 업데이트하는 방법을 찾고 있습니다.

누구나 AJAX 응답에서 배열을 전달하는 방법과 그 AJAX 응답을 사용하여이 큰 테이블을 업데이트하는 방법에 대한 현명한 생각이 있습니까? 그런 다음 테이블의 모든 td 요소의 배열을해야합니다

document.getElementById('myTable').getElementsByTagName('td');

: 당신이 테이블 태그 자체에 ID를 넣어 경우

출처

2012-02-28 rh4games

테이블에 대한 전체 마크 업을 작성하여 다시 클라이언트로 보낼 수 있습니까? 그런 다음 기존 테이블을 제거하고 "

...

"문자열을 서버에서 페이지로 전송합니다. Rails를 모르지만 JSP에서이 작업을 수행했습니다. 그렇지 않으면 종종 ajax로드 및 업데이트를 지원하는 데이터 테이블 플러그인 (예 : YUI DataTable)을 사용할 수 있습니다. –

아약스의 응답을 받으시겠습니까? 그렇다면 레일 변수를 어떻게 얻고 있습니까 ?? –

@ dku.rajkumar : 예, 저는 그것에 대해 확신합니다; 예를 들어, "@ new_r0c0_value"는 "update_values"라고하는 컨트롤러 메소드 내에서 계산되며 같은 양식의 다른 모든 필드에 대해 정상적으로 작동합니다. – rh4games

, 당신은이 같은 배열로 테이블의 모든 세포를 얻을 수 있습니다 루프를 통해 업데이트 할 수 있습니다.

일부 브라우저에서는 전체 셀을 개별적으로 변경하지 않고 전체 테이블을 제거하고 새 데이터로 새 테이블을 만드는 것이 더 효과적 일 수 있습니다. 문제는 테이블이 동적 레이아웃을 가질 수 있기 때문에 브라우저가 셀을 변경할 때마다 테이블을 릴레이하는 것이 효율적이지 않을 수 있다는 것입니다.

출처

2012-02-28 05:13:49 jfriend00

왜 각 행을 반복하지 않습니까? – AlxVallejo

@AlxVallejo - 귀하의 질문에 이해가되지 않습니다. OP는 테이블의 모든 셀을 업데이트하는 방법을 물었습니다.이 대답은 모든 셀의 목록을 얻는 방법을 제시하므로 모든 셀을 반복 할 수 있습니다. 그것을하기위한 다른 많은 방법들이 있지만 이것은 간단하고 효과적입니다. – jfriend00

아, 네 말이 맞아. 이것은 tl이었다. 대부분의 경우 데이터베이스에서 호출하여 모든 셀이 아닌 한 행의 속성을 반복하는 것이 더 쉬울 것이라고 생각합니다. – AlxVallejo

이것을 시도 ..

이 [1,2 같은 배열을 구성 할 수 있다면, ... 27], [1, 2, ... 27], .. [1,2 ,. .27]]

ID를 사용하지 않고 해당 테이블에 데이터를로드하는 것은 쉽습니다.

<table> 
     <% arr.each do |inner_arr| %> 
       <tr> 
       <% inner_arr.each do |val| %> 
         <td><%= val %></td> 
       <% end %> 
       </tr> 
     <% end %> 
</table>

출처

2012-02-28 05:50:52 Vadivelan

감사합니다 Vadivelan. 제가 누락 된 부분은 AJAX 응답에서 테이블을 업데이트하는 js 부분입니다. 서버에서 처음으로 빌드하는 방법이 아닙니다. – rh4games

그래도 js에서이 문제를 해결할 수 있습니다. 위에서 언급 한 표 내용을 부분 파일에 배치하십시오. 아약스 액션에서 배열을 만들고'code'page.replace_html 'elementID', : partial => file_name'code'를 사용하십시오. – Vadivelan

JQuery를 사용하는 경우 :nth-child 선택기를 사용할 수 있습니다. Ajax를 사용하는 테이블 목록에서 현재 업데이트 된 레코드를 강조 표시하는 방법입니다.

나는 모든 개체의 모음 인 @assets을 가지고 있으며 @asset는 업데이트되는 현재 레코드입니다. 테이블과 부분 _assets.html.erb은 다음과 같습니다

<% @assets.each_with_index do |asset, index| %> 
    <tr class="link"> 
    <td class="num"> <%= link_to index + 1, asset, :remote => true, :onclick => "$('#spinner').show()" %> </td> 
    <td> 
     <%= link_to asset.try(:patient).try(:display_name), asset, :remote => true, 
     :onclick => "$('#spinner').show()" %> 
    </td> 
    ... 
    </tr> 
<% end %>

을하고이 작업을 수행 update.js.erb :

... 
$("#assets").html("<%= escape_javascript(render "assets") %>"); 

$("table.listing > tbody tr:nth-child(<%= @assets.index(@asset) + 1 %>)").effect("highlight", {}, 3000); 
...

인덱스와 n 번째의 아이를 선택 강조 표시합니다.

출처

2012-02-28 07:37:55

AJAX 응답에서 큰 테이블을 업데이트하는 방법은 무엇입니까?

답변

관련 문제