如何将条件放在jquery中的.append()中

时间:2017-04-28 07:21:35

标签: javascript jquery ajax

我有这样的场景,我必须在元素的值不为null时附加到td我已经通过使用ie来实现。

tablerow = $('<tr>');
td = '<td>' + $(this)[0].attrValue+''                       
if ($(this)[0].countRequired != null)
td  = td + ' AND ' + $(this)[0].countRequired+''

但我希望通过在.append()中使用if条件来实现。

tablerow = $('<tr>')
.append($('<td>').append($(this)[0].attrValue+''))
if ($(this)[0].countRequired != null){
.append($('<td>').append($(this)[0].countRequired+''))
}

但在做的时候我会收到错误。(附后的截图)

Error Occured

  

以下是我的完整代码

function fetchRUInfo(ruId, functionName, ruOutputId){
    $.ajax({
        type: 'GET',
        url: "getRUInfo",
        data:'ruId='+ruId,
        success: function(data) {
            if(functionName == 'countByRU'){
            $('#showInformationOfRu'+ruId).empty();
            var tablebody = $('<tbody>');
            var tablerow = "";
            /*var td = "";*/
                $(data.ruInfoList).each(function(index){

/*                      tablerow = $('<tr>');
                        td = '<td>' + $(this)[0].attrValue+''

                        if ($(this)[0].countRequired != null)
                            td  = td + ' AND ' + $(this)[0].countRequired+''*/

                    tablerow = $('<tr>')
                    .append($('<td>').append($(this)[0].attrValue+'')

                    if ($(this)[0].countRequired != null){
                        .append($(this)[0].countRequired+''))
                    }




                    $(tablerow).append(td);
                    $(tablebody).append(tablerow);

                    });

                    $('<table>')
                    .attr('id','ruDetails')
                    .attr('class','table table-striped rowClick one border-a')
                    .html('<thead><tr><th>Criteria</th></tr></thead>')
                    .append(tablebody)
                    .appendTo('div#showInformationOfRu'+ruId);

            }else if(functionName == 'countByBE'){

                $('#showInformationOfRuInBE'+ruOutputId).empty();
                var tablebody = $('<tbody>');
                var tablerow = "";
                var td = "";
                    $(data.ruInfoList).each(function(index){

                            tablerow = $('<tr>');
                            td = '<td>' + $(this)[0].attrValue+''

                            if ($(this)[0].countRequired != null)
                                td  = td + ' AND ' + $(this)[0].countRequired+''

                        $(tablerow).append(td);
                        $(tablebody).append(tablerow);

                        });

                        $('<table>')
                        .attr('id','ruDetails')
                        .attr('class','table table-striped rowClick one border-a')
                        .html('<thead><tr><th>Criteria</th></tr></thead>')
                        .append(tablebody)
                        .appendTo('div#showInformationOfRuInBE'+ruOutputId);

            }
        },
        error: function() {
            alert('Some error occured while fetching Resource Units, please refresh it and try again');
        }
    });
};

更新 使用条件运算符方式,但仍然出错.. Still Error

Error 3

1 个答案:

答案 0 :(得分:1)

您收到错误是因为您在表达式中间插入了一个语句。你不能这样做。你最终在if正文中得到了这样的陈述:

.append($('<td>').append($(this)[0].countRequired+''))

...这是一个语法错误,.无法操作。

在继续之前,$(this)[0].xyz只是一种写作this.xyz的冗长方式,因此我将在此处使用较短版本。 : - )

您在评论中说过,您希望从代码的无条件部分添加td,而不是像代码似乎尝试那样添加第二个td。如果是这样,这是条件运算符的合理使用:

tablerow.append($('<td>').append(
    this.attrValue + '' + (this.countRequired != null ? this.countRequired : '')
));

或者我们可以使用curiously-powerful || operator *:

tablerow.append($('<td>').append(
    this.attrValue + '' + (this.countRequired || '')
));

或者如果它更复杂,我们只使用一个变量:

var cellContent = this.attrValue + '';
if (this.countRequired != null) {
    cellContent += this.countRequired;
}
tablerow.append($('<td>').append(cellContent));

* (这是我贫血的小博客上的帖子)

此处没有TypeError

var obj = {
  attrValue: "foo",
  countRequired: "bar",
  test: function() {
    var tablerow = $("<tr>");
    tablerow.append($('<td>').append(
        this.attrValue + '' + (this.countRequired != null ? this.countRequired : '')
    ));
    $("#table").append(tablerow);
  }
};
obj.test();
obj.countRequired = null;
obj.test();
<table><tbody id="table"></tbody></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>