【问题标题】:How could I create a table dynamically? [closed]如何动态创建表? [关闭]
【发布时间】:2014-12-22 03:54:36
【问题描述】:

我有这样的 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>

行数取决于对象中的属性数。

【问题讨论】:

  • 你能发布预期的输出 HTML 代码吗?
  • 属性是否都具有相同的命名协议,如图所示?即字母和增量行号
  • "行数取决于对象中的属性数。" 究竟如何?

标签: javascript xslt xml-parsing


【解决方案1】:

这是一个使用 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多