Question

我是jquery的新手，并使用以下json对象生成动态html。我的Html：

<table>
    <thead>
        <tr>
            <td>Client Name</td>
            <td>ACtive</td>
        </tr>
    </thead>
    <tbody id="ClientTbody">
    </tbody>
</table>

脚本是：

$(document).ready(function () {
    generateHTML();
});

function generateHTML(){
    if (data != null && data.Message == "Success") {
            if (data.Payload.length > 0) {
                $.each(data.Payload, function (i, item) {
                    var tr = '<tr class="edit" title="Edit">';
                    tr += '<td>' + item.clientName + '</td>';                   
                    tr += '<td>' + item.isActive + '</td>';
                    tr += '</tr>';
                    $("#TeamsTbody").append(tr);
                });
            }
        } else {
            alert(data.Message);
        }
}

现在我的问题是我希望在活动列中 ight标志或错误标志的图标或图片输入真或假。< / p>

Answer 1

您可以使用：

tr += '<td>' + item.isActive ? '<img src="active.png">' : '<img src="inactive.png">' + '</td>';

或者如果你有这两个images：

<img src="true.png">
<img src="false.png">

然后你可以这样做：

 tr += '<td>' + '<img src="'+item.isActive+'.png">' + '</td>';

Answer 2

试试这个：根据活动状态创建图像字符串并将其附加到td中。见下文。

注意 - 我已将right.png和wrong.png图片仅用于理解目的，请使用实际图像路径更新src。

$(document).ready(function () {
    generateHTML();
});

function generateHTML(){
    if (data != null && data.Message == "Success") {
            if (data.Payload.length > 0) {
                $.each(data.Payload, function (i, item) {
                   var image = "";
                   if(item.isActive)
                     image = "<img class='right' src='right.png'>";
                   else
                     image = "<img class='wrong' src='wrong.png'>";

                    var tr = '<tr class="edit" title="Edit">';
                    tr += '<td>' + item.clientName + '</td>';                   
                    tr += '<td>' + image  + '</td>';
                    tr += '</tr>';
                    $("#TeamsTbody").append(tr);
                });
            }
        } else {
            alert(data.Message);
        }
}

Answer 3

$(document).ready(function () {
    generateHTML();
});

function generateHTML() {
    if (data != null && data.Message == "Success") {
        if (data.Payload.length > 0) {
            $.each(data.Payload, function (i, item) {
                var tr = '<tr class="edit" title="Edit">';
                tr += '<td>' + item.clientName + '</td>';
                 //simplest way is
                tr += '<td>' + (item.isActive ? '<img src="green.png">' : '<img src="red.png">') + '</td>';
                tr += '</tr>';
                $("#TeamsTbody").append(tr);
            });
        }
    } else {
    alert(data.Message);
}
}

替换活动列中字符串的图标

3 个答案: