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

Posted 2023-03-14

【中文标题】如何在 DOM 追加期间防止表格行高故障？

【英文标题】：How to prevent table row height glitch during DOM append?

【发布时间】：2021-03-16 00:23:08

【问题描述】：

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

我试过了

.portfolio-table tr 
    height: 80px;

表格

<table class="table portfolio-table">
    <thead class="thin-border-bottom">
        <th >#</th>
        <th >Name</th>
        <th  class="text-left">Tags</th>
        <th >Edit</th>
        <th >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"  >
                <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);
            
        );



    );
);

【问题讨论】：

您是否可以创建最少的代码来重现该问题？

【参考方案1】：

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

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

<img src="/assets/fe/img/svg/default.svg" style="float: right;"  >

【讨论】：

测试你的加载微调器是否像这样一个jsfiddle.net/developit/tvqbxfdf或这个jsfiddle.net/bootstrapious/bu7koazh

【参考方案2】：

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

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

<img src="/assets/fe/img/svg/default.svg"   >


.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"  >
                <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

【讨论】：

您是否可以创建最少的代码来重现您的问题？

用ajax会比较麻烦，但这是视频结果； ：dropbox.com/s/6q1fzhyvj0v6v29/…

你能检查你的 HTML，我可以看到你在开始标签 tr 元素内开始你的 foreach 循环，但在 tr 元素的结束标签之后结束它？它不应该在tr的开始标记之前开始吗？

嗨@cyber8200，您是否通过将foreach移出tr元素来检查代码。

【参考方案3】：

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

做这个

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

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

【讨论】：

为什么 hide 是淡出的解决方法？

如果您使用淡出 - 图像在 DOM 中仍然可用，并且需要一些时间才能消失。所以它需要额外的空间一段时间。 :) 如果它给你一个解决方案。接受作为答案谢谢

【参考方案4】：

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

* 
    animation: none !important;

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

【讨论】：

试试看，还是一样！