2014-12-22 89 views
0

我有這樣的XML:如何動態創建表格?

<root> 
    <object a1="0" b1="2" c1="12/01" a2="0" b2="2" c2="12/03" a3="0" b3="2" c3="12/06"/> 
    <object a1="0" b1="2" c1="12/01" a2="0" b2="2" c2="12/03" /> 
    <object /> 
</root> 

我需要爲每個對象表。

object[0]

---------------------------- 
a1 value | b1 value | c1 value| 
---------------------------- 
a2 value | b2 value | c2 value| 
---------------------------- 
a3 value | b3 value | c3 value| 
---------------------------- 

object[1]

---------------------------- 
a1 value | b1 value | c1 value| 
---------------------------- 
a2 value | b2 value | c2 value| 
---------------------------- 

但我不知道如何使用XSLT來做到這一點,因爲循環每個屬性都有不同的名稱。 你能幫我解釋一下嗎? 我應該使用JavaScript解析屬性嗎?

預期HTML:

<table> 
<tr> 
    <td>a1 value</td> 
    <td>b1 value</td> 
    <td>c1 value</td> 
</tr> 
<tr> 
    <td>a2 value</td> 
    <td>b2 value</td> 
    <td>c2 value</td> 
</tr> 
<tr> 
    <td>a3 value</td> 
    <td>b3 value</td> 
    <td>c3 value</td> 
</tr> 
</table> 

的行數是依賴於對象的屬性的數量。

+1

你能發佈預期的輸出HTML代碼嗎? –

+0

做屬性都有相同的命名協議如圖所示?即字母和增量行號 – charlietfl

+0

「*行數取決於對象中屬性的數量。*」究竟如何? –

回答

0

下面是使用jQuery

var attrs = ['a', 'b', 'c']; 
var html = ''; 
$(xml).find('object').each(function (i) { 
    var ctr = 1, 
     $obj = $(this); 
    html += '<h3>Table #' + (i + 1) + '</h3><table>'; 

    do { 
     html += '<tr>'; 
     $.each(attrs, function (_, letter) {     
      html += '<td>' + $obj.attr(letter + ctr) + '</td>';    
     }); 
     ctr = $obj.attr('a' + (ctr + 1)) !== undefined ? ctr +1 : -1;   
     html += '</tr>'; 
    } while (ctr > 0); 
    html += '</table>'; 
}); 

$('body').append(html) 

這使得假設:如果第一屬性a有一個行的值,所有其他屬性也將存在該行

工作示例DEMO