Javascript td'内的多个条件；s类属性

我有一个对象，它有一个String属性，可能有四个可能的值，对于每个值，我想给单元格添加一个不同的css类。 我想知道这里是否有写复合条件的方法：

<ui:repeat value="#{row.info}" var="wui" >
            <td class="#{wui.status eq 'In execution'? 'inexec' : '' }"> 
            <!--<td id="wuitd" onLoad="classfunction()" >--> 
                <h:outputText value="#{wui.status}" />
                <h:outputText value="#{wui.remainingEffort} effort units" />
           </td>
</ui:repeat>

我尝试编写javascript函数，但我不确定它是否正确，而且我认为函数调用是错误的：

<td id="wuitd" onLoad="classfunction()" >
        <h:outputText value="#{wui.status}" />
</td>

<script>
    function classfunction(){

        char status = document.getElementById("wuistatus").value;
        switch(status) {
            case 'In execution':
                document.getElementById("wuitd").style.parentRule('inexec');
                break;
            case 'Ready for execution':
                document.getElementById("wuitd").style.parentRule('ready');
                break;
            case 'Finished':
                document.getElementById("wuitd").style.parentRule('finished');
                break;
            case 'Not ready':
                document.getElementById("wuitd").style.parentRule('notExec');
                break;
            default:
                code block
        }
    }

</script>

函数类函数（）{
char status=document.getElementById（“wuistatus”）.value；
开关（状态）{
“执行中”案件：
document.getElementById（“wuitd”）.style.parentRule（“inexec”）；
打破
案件“准备执行”：
document.getElementById（“wuitd”）.style.parentRule（“就绪”）；
打破
案例“已完成”：
document.getElementById（“wuitd”）.style.parentRule（“完成”）；
打破
案例“未准备就绪”：
document.getElementById（“wuitd”）.style.parentRule（“notExec”）；
打破
违约：
代码块
}
}

您可以找到您需要了解的关于问题JS部分的大部分或全部信息。。。我不知道“wui”部分是关于什么的

进一步的参考资料（您可能会发现使用Google和添加一些额外的关键字来匹配您的环境会更好）：

在这种情况下，我的第一个想法几乎是使用“嘿，我知道，我可以使用jQuery！”。。。我知道，“现在我有两个问题”，但它确实有效：o）

---

无论如何，我假设您在这里加载了某种JS框架。如果是这样，并且它不是jQuery，那么找出它的“页面加载”机制是什么。除非您完全确定应用程序将使用哪些浏览器，否则您不想“手工”完成这项工作。

看起来您正在使用JSP/JSF（或者至少是使用EL表达式的东西）。在以后的问题中，最好明确说明您正在使用什么（通常通过标签）。根据EL的文档，您可以使用哈希查找。因此，如果您可以在模板中定义以下内容：

statusToClass = {
  "In execution": "inexec",
  ... // define your other value -> class translations
}

您应该能够：

<td class="#{statusToClass[wui.status]}"> 
  <h:outputText value="#{wui.status}" />
</td>

---

看起来确实可以定义EL3可以访问的方法（作为Bean的一部分）——所以这可能是您可以研究的另一条路线（而不是JavaScript方法，后者看起来可能会出现一些问题，例如

onLoad

和

value

——除非您使用的Java上下文通过扩展支持这些问题）.听上去，你与EL期望的工作方式集成得越多，事情就越容易-特别是当使用其他约定时，如

ui:repeat

我认为你不能从

td

元素触发

onload

，ref:是的，onload不是td的事件。但我想触发js函数自动。不是由用户事件。感谢链接，我将看到如何更改类。但是在您提供的链接中，他们通过onclick事件调用js函数。我有一个重复所有对象的ui:repreat。我想在ui:repreat每次将新对象加载到表中时调用js函数。我四处搜索了一下，看看是什么这将被认为是最佳实践（我会使用jQuery，它只是“更简单”）。我会在我的答案中添加一些参考资料（评论有点拥挤）。很抱歉耽搁了，我一直在购买家具！

statusToClass[wui.status]||'default'