如何在 DOM 追加期间防止表格行高故障？

Question

我首先加载我的表格，然后异步动态地附加标签。 一旦添加了这些标签，表格行高似乎就会向上移动。我怎样才能防止这种情况发生？

我试过了

.portfolio-table tr {
    height: 80px;
}

表格

<table class="table portfolio-table">
    <thead class="thin-border-bottom">
        <th width="2%">#</th>
        <th width="28%">Name</th>
        <th width="60%" class="text-left">Tags</th>
        <th width="5%">Edit</th>
        <th width="5%">Delete</th>
    </thead>

    <tbody>

        <tr>

            @foreach ($portfolios as $portfolio)
            <td title="{{ $portfolio->id }}">{{ $portfolio->id }} </td>

            <td>
                <a href="/portfolio/{{ $portfolio->id ?? '' }}/">
                    {{ $portfolio->name }}
                </a>
            </td>

            <td class="text-right" >
                <img src="/assets/fe/img/svg/default.svg" alt="Loading" width="30px">
                <p class="portfolioSkillTags text-left" id="{{ $portfolio->id ?? '' }}"></p>

            </td>


            <td>
                <a  href="/portfolio/{{ $portfolio->id ?? '' }}/edit" type="button" class="btn btn-info btn-sm">
                    Edit
                </a>
            </td>

            <td>
                <a  data-toggle="modal"  data-target="#delete_portfolio_{{ $portfolio->id ?? '' }}" type="button" class="btn btn-danger btn-sm">
                    Delete
                </a>
            </td>

        </tr>

        @endforeach

    </tbody>
</table>

ajax

$("tbody").each(function(){
    $($(this)).find('tr').each(function(){

        var selector = $(this);
        var id = $(this).find('td:nth-child(1) ').attr('title');
        // console.log('%c id = ' + id, "color: green;");
        // return false;
        var data = {};
        data.id  = id;

        $.ajax({
            method: 'POST',
            url: '/api/portfolio/' + id + '/skills',
            crossDomain: true,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
                "Cache-Control": "no-cache"
            },
            data: data,
            success: function(response){
                console.log(id, response);

                $('p.portfolioSkillTags#'+ id).prev('img').fadeOut();

                for (i = 0; i < response.length; i++) {
                    // console.log(response[i],id);

                    var name  = response[i]['name'];
                    var color = response[i]['color'];

                    $('p.portfolioSkillTags#'+id).prepend('<span class="badge" style="background-color:' + hexToRgb(color,.2) + ';border:' + hexToRgb(color,.7) + ' 2px solid;">' + name + '</span>').fadeIn('slow');
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });



    });
});

Answer 1

似乎加载微调器图像会导致故障，因为它使

文本溢出。您可以尝试使用一些 css 样式（例如 float right）来修复它，这样它就不会使段落换行。

<img src="/assets/fe/img/svg/default.svg" style="float: right;" alt="Loading" width="30px">

Answer 2

问题在于微调器（svg 元素）的高度。当您异步加载数据时，它会使微调器具有更大的高度。一旦您的 API 调用成功解析，微调器元素（具有较大高度）就会消失。然后您可以保留在较低高度的其他数据缩小并产生此问题。

您可以通过多种方式修复它，最简单的一种是保持微调器 (svg) 元素的高度（包括填充）小于td 元素的高度。例如：

<img src="/assets/fe/img/svg/default.svg" alt="Loading" width="30px" height="30px">


.portfolio-table tr td {
    height: 50px;
}

UODATE

请同时纠正 HTML，您可能希望在 tr HTML 元素的开始标记之外启动 foreach 循环。

@foreach ($portfolios as $portfolio)
<tr>

            <td title="{{ $portfolio->id }}">{{ $portfolio->id }} </td>

            <td>
                <a href="/portfolio/{{ $portfolio->id ?? '' }}/">
                    {{ $portfolio->name }}
                </a>
            </td>

            <td class="text-right" >
                <img src="/assets/fe/img/svg/default.svg" alt="Loading" width="30px">
                <p class="portfolioSkillTags text-left" id="{{ $portfolio->id ?? '' }}"></p>

            </td>


            <td>
                <a  href="/portfolio/{{ $portfolio->id ?? '' }}/edit" type="button" class="btn btn-info btn-sm">
                    Edit
                </a>
            </td>

            <td>
                <a  data-toggle="modal"  data-target="#delete_portfolio_{{ $portfolio->id ?? '' }}" type="button" class="btn btn-danger btn-sm">
                    Delete
                </a>
            </td>

        </tr>

        @endforeach

Answer 3

$('p.portfolioSkillTags#'+ id).prev('img').fadeOut();

做这个

$('p.portfolioSkillTags#'+ id).prev('img').hide();

请同时纠正 HTML，您可能希望在 Prince 提到的 tr HTML 元素的开始标记之外启动 foreach 循环

Answer 4

我认为问题出在 CSS 动画上。尝试全局强制执行以禁用它们以查看行为是否消失。

* {
    animation: none !important;
}

如果是这种情况，请在加载数据时使用正确的 css 选择器禁用动画。