Laravel/Ajax：在函数内突出显示颜色不活动或活动答案

【问题标题】：Laravel/Ajax: highlight color inactive or active inside a functionLaravel/Ajax：在函数内突出显示颜色不活动或活动
【发布时间】：2021-07-16 03:36:58
【问题描述】：

如果您将在下面的代码中看到，在我的success: function (response) 下，getgroupstatus 将根据行列显示active 或inactive。

        function fetchgroup() {
            $.ajax({
                type: "GET",
                url: "/clinical/bbr-group-configuration-group-list",
                dataType: "json",
                success: function (response){
                    var tbody="";
                    $.each(response.all_groups, function (key, group) {
                    tbody+=`
                        <tr>
                            <td><p class="font-weight-bold mb-0">${group.group_name}</p>${group.group_description}</td>
                            <td>${group.group_type_name}</td>
                            <td>User List</td>
                            <td>${getgroupstatus(group.effective_start_datetime)}</td>
                            <td>
                                <button type="button" value="${group.group_id}" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
                                <button type="button" value="${group.group_id}" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
                            </td>
                        </tr>`;
                    });
                    
                    $('#main-group-list tbody').html(tbody)

                    //condition if status is shown as active or inactive
                    function getgroupstatus(status) {
                        var g_status = '';
                        if (status === null) {
                            g_status = 'Inactive'
                        } else {
                            g_status = 'Active'
                        } 
                        return g_status;
                    }
                }
            });
        }

我的这个页面已经有引导程序，所以我试图拥有 active text-success 和 inactive text-danger。

我的问题是我需要在getgroupstatus 之外定位<td> 来更改文本颜色，我该如何做到这一点？

我的想法是给<td> 一个类似status_color 的类并添加到if 条件：

 if (status === null) {
    status_color = (code to change class text color)
    g_status = 'Inactive'

任何帮助将不胜感激，谢谢

【问题讨论】：

一种选择是让你的getgroupstatus 像<span class="text-success">Active</span>一样返回html

标签： php ajax laravel function if-statement

【解决方案1】：

我会简化函数：

    function fetchgroup() {
            $.ajax({
                type: "GET",
                url: "/clinical/bbr-group-configuration-group-list",
                dataType: "json",
                success: function (response){
                    var tbody = response.all_groups.map(function (key, group) {
                    return `
                        <tr>
                            <td><p class="font-weight-bold mb-0">${group.group_name}</p>${group.group_description}</td>
                            <td>${group.group_type_name}</td>
                            <td>User List</td>
                            <td class="${groupIsActive(group.effective_start_datetime) ? 'active' : 'inactive'}">
                                ${groupIsActive(group.effective_start_datetime) ? 'Active' : 'Inactive'}
                            </td>
                            <td>
                                <button type="button" value="${group.group_id}" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button>
                                <button type="button" value="${group.group_id}" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>
                            </td>
                        </tr>`;
                    });
                    
                    $('#main-group-list tbody').html(tbody)

                    //condition if status is shown as active or inactive
                    function groupIsActive(status) {
                        return status === null;
                    }
                }
            });

【讨论】：