Javascript 是否有更好的方法将多值数据显示为列？

我的notes数据库中有4个审核字段。它们是多值的，当表单上的某些内容发生更改时，它们都会得到一个新条目。我有一个审计表单，它以列的方式显示这些字段。几乎像一个风景。下面是这些列的代码

<xp:tr>
  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWhen"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWho"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditWhat"></xp:text></xp:td>

  <xp:td style="background-color:rgb(255,255,255)">
  <xp:text escape="true" id="dspAuditValue"></xp:text></xp:td>
</xp:tr>

我使用客户端的“OnClient Load”事件填充这些字段

var auditWhen=XSP.getElementById（“#{id:auditWhen}”）.value.split（“；”）；
XSP.getElementById（“#{id:dspAuditWhen}”）.innerHTML=auditWhen.join（“\n”）；
var auditWho=XSP.getElementById（“#{id:auditWho}”）.value.split（“；”）；
对于（i=0；i

注意几件事。我还没有dspAuditValue的代码。我也在控制审核的长度。还要注意，我有一个变量“a”和“b”用于调试

不管怎样，这段代码对于dspAuditWhen和dspAuditWho列都非常有效。对于dspAuditWhat，它们似乎只是用空格分隔，而不是换行符

我比较了“auditWhat”和“auditWho”。“auditWhat”与“auditWho”一样成功拆分为一个数组

我把“b”和“a”作了比较。它也是一个大字符串，每个元素之间用一个\n分隔

我已经验证了AuditNotes客户端中的多值列表字段是什么。（如果不是这样，那么我的Notes客户审核表就不会工作了。）

我认为这个代码绝对没有错。这就好像网络浏览器在说“你得到了两列你想要的数据，就这样

---

IE和Firefox中的相同行为\n不是HTML标记-它就像HTML源代码中的回车符

尝试加入
而不是加入新行，例如：

XSP.getElementById("#{id:dspAuditWhat}").innerHTML = auditWhat.join("<br/>");

XSP.getElementById（“#{id:dspAuditWhat}”）.innerHTML=auditWhat.join（
）；

---

虽然所有值都在表的同一行中，但不确定为什么SpecialLuar Shop中的一列需要特殊处理。 每个值可以生成一行。 这可以通过以下方式在服务器端完成：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="TestHistory"
            action="openDocument" />
    </xp:this.data>

    <xp:this.resources>
        <xp:styleSheet href="/histo.css" />
    </xp:this.resources>

    <xp:repeat id="repeat1" rows="30"
        var="rowData" indexVar="rowIndex"
        value="#{document1.HistoDate}">
        <xp:this.facets>
            <xp:text disableTheme="true" xp:key="header"
                escape="false">
                <xp:this.value><![CDATA[
            <table class="histo">
                <tr>
                    <th>When</th>
                    <th>Who</th>
                    <th>What</th>
                    <th>Comment</th>
                </tr>
            ]]></xp:this.value>
            </xp:text>

            <xp:text disableTheme="true" xp:key="footer"
                escape="false">
                <xp:this.value><![CDATA[</table>]]></xp:this.value>
            </xp:text>
        </xp:this.facets>

        <xp:panel tagName="tr" styleClass="#{javascript: (rowIndex%2 ? 'odd' : 'even')}">
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoDate')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoActor')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoAction')[rowIndex]}" />
            <xp:text escape="true" tagName="td"
                value="#{javascript:document1.getItemValueArray('HistoComment')[rowIndex]}" />
        </xp:panel>
    </xp:repeat>

</xp:view>

table.histo {
    margin: 10px;
    border: 1px solid #E0E0E0;
    border-collapse: collapse;
}
table.histo th, table.histo td {
    border: 1px solid #E0E0E0;
    padding: 2px 4px;
}
table.histo th {
    font-weight: bold;
    text-align: center;
    background-color: #D0D0D0;
}
table.histo tr.even {
    background: #FFF;
}
table.histo tr.odd {
    background: #F0F0F0;
}

---

带有呈现HTML的jsfiddle.net会很有用，因为这些字段是由服务器提供的，我不确定如何将它们放入jsfiddle（再说一次，我从未使用过jsfiddle，粗略的一瞥并没有给我很多线索）在chrome中加载页面，右键单击数据并选择inspect元素。选择父容器，右键单击调试器并选择复制html，粘贴到JSFIDLE中，删除敏感数据，保存并在此处发布URL感谢您将此页面指向我！我将玩它。宾果！成功了！我有点想知道为什么\n在前2列中工作ns，而不是第三个…很好地发现，我甚至没有看到XSP调用的混乱。前两列的事情很奇怪。我所能想到的是元素的呈现方式有一个设置（HTML与纯文本），但我希望在xml标记中看到一些东西来表示这一点。另外，这段代码是客户端运行的（大概是？）所以这无论如何都不会影响它。我正在抓紧救命稻草..附言。如果你发现为什么专栏表现不一样，请发到这里-我很感兴趣！

table.histo {
    margin: 10px;
    border: 1px solid #E0E0E0;
    border-collapse: collapse;
}
table.histo th, table.histo td {
    border: 1px solid #E0E0E0;
    padding: 2px 4px;
}
table.histo th {
    font-weight: bold;
    text-align: center;
    background-color: #D0D0D0;
}
table.histo tr.even {
    background: #FFF;
}
table.histo tr.odd {
    background: #F0F0F0;
}