将JavaScript插入JavaScript HTML返回

Question

将JavaScript插入JavaScript HTML返回

3

我有一个使用javascript return函数返回的HTML表格。它运行得很完美，直到我尝试在其中间添加一个额外的if子句。

function format ( d ) {
    return '<div class="slider">'+     
    '<table id="expand">'+
        '<tr>'+
          '<td><button class="btn btn-success" value="Save" onclick="saveItem(this)" data-soli="'+d.soli+'" data-comments="'+d.comments+'" >Save</button></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="dropHeader">Customer</td>'+
            '<td class="black">'+d.customer+'</td>'+
            '<td class="dropHeader">Value</td>'+

            if (d.country !== "usd") {
              '<td class="red">'+d.value+'</td>'+
            } else {
              '<td class="black">'+d.value+'</td>'+
            }                

            '<td class="dropHeader">Comments</td>'+
            '<td class="black"><input onblur="submitComments(this.value)" type="text"><br>'+d.comments+'</input></td>'+            
        '</tr>'+                                               
    '</table>'+    
   '</div>'; 
}

我添加if语句后，代码失败了。这是一个语法问题吗？我该如何打破HTML，以便我可以在返回中添加其他的JavaScript？我的目标是，当该行货币为美元时，添加红色，但我无法弄清楚如何实现。

- Brian Powell

语法错误。你不能像那样在字符串中添加代码。 - CodeGodie

@CodeGodie 是的，我明白我的“这是语法问题吗？”这句话已经涵盖了我已经理解了这一点的事实...... - Brian Powell

4个回答

4

您的错误在于，本质上，您正在执行以下操作：

return "Something" + if(condition){}else{} + " else";

这是JavaScript中非法的语法。

有两种解决方案：第一种是使用内联if语句，如下所示：

return "Something" + (x == y ? "output if succeeded" : "output if not") + ".";

因此，您的内联if将变为：

+ (d.country !== "usd" ? '<td class="red">'+d.value+'</td>' : '<td class="black">'+d.value+'</td>') +

或者第二种解决方案是，你可以使用一个输出字符串，并将内容附加到其中，如下所示：

function format(d){
    var output = "";

    output += "Testing code";

    if(d.country !== "usd"){
        output += "Woo we succeeded";
    }

    output += " more testing <i>code<i>.";

    return output;
}

- Aeolingamenfel

是的，这也很棒！谢谢你抽出时间写下这些 - 它教会了我许多不同的解决方法。 - Brian Powell

2

太棒了。很高兴能帮助你。 - Aeolingamenfel

1

按照这种方式来做

function format ( d ) {
var cssClass="";
if (d.country !== "usd") {
cssClass="red";
}
else{
cssClass="black";
}
    return '<div class="slider">'+     
    '<table id="expand">'+
        '<tr>'+
          '<td><button class="btn btn-success" value="Save" onclick="saveItem(this)" data-soli="'+d.soli+'" data-comments="'+d.comments+'" >Save</button></td>'+
        '</tr>'+
        '<tr>'+
            '<td class="dropHeader">Customer</td>'+
            '<td class="black">'+d.customer+'</td>'+
            '<td class="dropHeader">Value</td>'+
            '<td class="'+cssClass+'">'+d.value+'</td>'+           
            '<td class="dropHeader">Comments</td>'+
            '<td class="black"><input onblur="submitComments(this.value)" type="text"><br>'+d.comments+'</input></td>'+            
        '</tr>'+                                               
    '</table>'+    
   '</div>'; 
}

- Sid M

所有这些回答都是很好的学习经验，但我会选择这个。它允许我在return之后保持代码不变，只需在之前插入变量并使用它们。非常感谢！看起来这是我疏忽了一个简单的问题 :) - Brian Powell

1

改为：

        if (d.country !== "usd") {
          '<td class="red">'+d.value+'</td>'+
        } else {
          '<td class="black">'+d.value+'</td>'+
        }

To this:

+((d.country !== "usd")?'<td class="red">'+d.value+'</td>':'<td class="black">'+d.value+'</td>')+

- CodeGodie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Walter Chapilliquen - wZVanG · Accepted Answer

使用三元运算符，例如：

... etc ...
+
'<td class="dropHeader">Value</td>'
+
(d.country !== "usd" ? '<td class="red">'+d.value+'</td>' : '<td class="black">'+d.value+'</td>')
+
'<td class="dropHeader">Comments</td>'
+
... etc ...