前端加载table时，根据条件判断a标签是否显示(使用动态id)

最新推荐文章于 2022-03-14 16:32:12 发布

intelrain

最新推荐文章于 2022-03-14 16:32:12 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/intelrain/article/details/82843138

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在前端加载table时如何根据条件决定a标签是否显示。关键步骤包括设置动态id，如id="detailnew_' + i + '"，在render方法后获取动态id的值，例如$("#detailnew_" + i + "").show()。通过在ajax返回值中判断并设置全局变量，或者利用display属性结合变量isDisplay来控制a标签的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       for (let i = 0; i < datanew.length; i++) {

            let trItem = $('<tr></tr>');
            trItem.append('<td hidden>' + datanew[i].cid + '</td>');
            trItem.append('<td>' + datanew[i].cname + '</td>');
            trItem.append('<td hidden>' + datanew[i].pid + '</td>');
            trItem.append('<td><a href="#" class="proLink"  name="' + datanew[i].pid + '">' + datanew[i].pname + '</a> <a href="#" class="proDetail" style="color: #61d4a7" id="detail">' + '  详情' + '</a> </td>');
            trItem.append('<td hidden>' + datanew[i].epicid + '</td>');
            trItem.append('<td><a href="#" class="epicLink" name="' + datanew[i].pid + '" value="' + datanew[i].epicid + '">' + datanew[i].epicname + '<a href="#" class="childEpicDetail" style="color: #FFDE75"  id="detailnew_' + i + '"  hidden>' + '  子Epic' + '</a> </td>');
            trItem.append('<td>' + datanew[i].priority + '</td>');
            trItem.append('<td>' + datanew[i].completely + '</td>');
            trItem.append('<td>' + datanew[i].issuessum + '</td>');
            trItem.append('<td>' + datanew[i].doneissuesnum + '</td>');
            trItem.append('<td>' + datanew[i].undoissuesnum + '</td>');
            trItem.append('<td>' + datanew[i].undoissueswithsprint + '</td>');
            trItem.append('<td>' + datanew[i].undoissueswithbacklog + '</td>');
            trItem.append('<td>' + datanew[i].startdate + '</td>>');
            trItem.append('<td>' + datanew[i].enddate + '</td>>');
            trItem.append('<td>' + datanew[i].datascope + '</td>>');
            $('#epicTb').append(trItem);

            //如果有子Epic，则显示子Epic的详情 20180925
            isHaveChildEpic(datanew[i].epicid);
            if (isCheckChild == true) {
                $("#detailnew_" + i + "").show();
            }
        }

function isHaveChildEpic(epicid) {
    $.ajax({
        type: 'get',
        url: portUrl + ':8005/jira/isHaveChildEpic',
        data: {
            'epicid': epicid
        },
        success: function (result) {
            if (result > 0) {
                isCheckChild = true;
            }
            else {
                isCheckChild = false;
            }
        },
        error: function (error) {
            $('#overlay')[0].style.display = 'none';
            showInfo('获取错误！');
        },
        async: false
    });
}

使用方法

1、设置动态id为： id="detailnew_' + i + '"

2、获取动态id的值： $("#detailnew_" + i + "").show();

注意：获取动态id的值一定要在render方法加载方法之后去取。

3、代码块二，是判断是否为符合条件的

注意：在ajax的返回值里，进行判断，是设置了全局变量的值。

4、还有一种实现方式，是使用display的值。

简单说明如下

trItem.append('<td> <a href="#" class="childEpicDetail" style="color: #FFDE75;display: '+isDisplay +'">' + ' 子Epic' + '</a> </td>');

设置style里面的 display为变量值。

let isDisplay='none';

if(isHaveChildEpic(datanew[i].epicid )) {