자바 스크립트로 테이블 셀에 배열 값 삽입

Question

테이블에 값을 입력해야합니다. 모든 값은이 같은 아약스/php에 요청에서 반환 된 배열에 포함되어

var data = []; 

//Consider that the number of the object (in this case only 3) obtained from the server are equal to the number of rows in tbody (6 rows in tbody = 6 object from server). 

data[0] = {From: '01/01/2012', To: '01/01/2013', Interest: 80.00, Residual: 0, Capital: 1000.00, Days: 366}; 
data[1] = {From: '01/01/2013', To: '01/01/2014', Interest: 85.00, Residual: 0, Capital: 980.00, Days: 365}; 
data[2] = {From: '01/01/2014', To: '29/04/2014', Interest: 20.00, Residual: 75.00, Capital: 980.00, Days: 118}; 

그것은 테이블에 삽입하는 방법 값이 반드시 설명하기 조금 어려운, 그래서 나는 결과에 바이올린을 만들어 I 얻고 싶습니다. 나는 당신이 나에게 최종 결과를 줄 것을 기대하지 않는다. (물론, 환영 할만하다. :)). 그러나 적어도 어떤 아이디어는 시작해야한다.

**

FIDDLE 편집

나는 세포에 ID를 할당하고 지금은 모든 값이 바로 삽입됩니다. 이것이 업데이트 된 바이올린입니다. 코드가 더 우아하게 쓰여질 수 있다고 생각합니까?

UPDATE FIDDLE

Answer 1

I 데이터가 아약스/php에 요청에서 돌려 볼 수는 JSON 형식입니다. 따라서 HTML 표에 삽입하려면 JQuery을 사용할 수 있습니다.

예 (당신이 주어진 샘플 데이터) :

당신이 (JQuery와 함께)이 자바 스크립트 기능을 사용하는 경우

function buildDataTableHtml(data){ 
    var tableHtml = "<table><tr>"; 
    tableHtml += "<th>From</th>"; 
    tableHtml += "<th>To</th>"; 
    tableHtml += "<th>Interest</th>"; 
    tableHtml += "<th>Residual</th>"; 
    tableHtml += "<th>Capital</th>"; 
    tableHtml += "<th>Days</th>"; 
    tableHtml += "</tr>"; 

    $.each(data, function(i, v){ 
     tableHtml += "<tr>"; 
     tableHtml += "<td>" + v.From + "</td>"; 
     tableHtml += "<td>" + v.To + "</td>"; 
     tableHtml += "<td>" + v.Interest + "</td>"; 
     tableHtml += "<td>" + v.Residual + "</td>"; 
     tableHtml += "<td>" + v.Capital + "</td>"; 
     tableHtml += "<td>" + v.Days + "</td>"; 
     tableHtml += "</tr>"; 
    }); 
    tableHtml += "</table>"; 

    return tableHtml; 
} 

이 함수는 당신이 원하는 테이블의 HTML을 반환합니다. 희망이 당신을 위해 도움이 될 것입니다

참고 : 나는 단지 응답 상자에 적어,이 작동하는지 확인하려고하지 않았다. 그러나 코드가 작동되기를 바랍니다. :)