克隆outerhtml时添加了JQuery“display：none”

Posted 2023-05-07

【中文标题】克隆outerhtml时添加了JQuery“display：none”

【英文标题】：JQuery "display:none" being added when cloning outerhtml

【发布时间】：2018-05-06 00:50:37

【问题描述】：

我有一个 Magento 网站，我需要在其中获取表格内容并在同一产品页面的其他地方再次使用它。我遇到的问题是在本地主机上一切正常，但是当我部署到我们的开发和实时服务器时。代码如下：

  $j( window).on('load', function() 
         moveSpecTable();
    );
    function moveSpecTable()
        console.log('doc ready?');
        if($j('table:first').prop('outerhtml').length)
            console.log("length ");
            try 
                var t = $j('table').html($j('table:first').clone()).html();
              //$j('table:first').prop('outerHTML');

                //$j(t).css("display" , "table");
                $j($j('.add-to-cart-wrapper')).append(t);

            catch (err)
                console.log('ERROR');
            
        

        console.log(t);
        return false;
    

我的本​​地 MAMP 服务器上的输出如下：

<table border="0">

live/dev 服务器上的输出如下：

        <table style="display: none;" border="0">

有人知道为什么会这样吗？无论我使用 clone 还是 outerhtml，结果都是一样的。

谢谢

【问题讨论】：

原表有display: none吗？

你好，不是如下：

【参考方案1】：

我不明白为什么会这样，所以改变了我的方法。

/** * 重新渲染规格表 */

$j( window).on('load', function() 

    moveSpecTable();
);
function moveSpecTable()
    if($j('table:first').prop('outerHTML').length)
        try 
            var t = '<table style="display:table; border: 0;">';
            var t1 = $j('table:first').prop('innerHTML');
            var t2 ='</table>';
            var res = t.concat(t1, t2);
            $j($j('.add-to-cart-wrapper')).append(res);
        catch (err)
            console.log('ERROR');
        
    
    return false;

我从测试中知道，抓取 innerHtml 不会导致“display:none”被添加到表格中。所以我只是将表格开始和结束连接到 innerHtml 和繁荣。这可以按我的意愿工作。不太聪明，但....