Insert javascript into javascript html return

Insert javascript into javascript html return

本文关键字：javascript return html into Insert      更新时间：2023-09-26

我有一个使用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？ 我的目标是在行的货币以美元为单位时添加 td 类red，但我不知道如何让它工作。

使用三元运算符，例如：

... 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 ...

你的错误是因为，本质上，你正在做以下等效的事情：

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

这是Javascript的非法语法。

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

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

所以你的内联如果会变成：

+ (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;
}
这样做 

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>'; 
}

更改以下内容：

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

对此：

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