草庐IT

javascript - appendTo 没有将我的元素放在我想要的位置

coder 2025-03-24 原文

我使用 jQuery 在表格中添加行，带有一些输入/选择。我有一个显示的模板行:无，为了添加一个新行，我复制了这一行并将它放在我的表的 tbody 末尾。一些代码:

CSS:

.template {
    display: none;
}

.regle {
    display: block;
}

HTML :

<table class='w100' cellspacing='0' cellpadding='0' id='listTable'>
            <thead>
                <tr>
                    <th>foo</th>
                    <th>bar</th>
                    <th>foobar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="template">
                    <td>
                        <?php echo $this->form->foo->renderViewHelper(); ?>
                        <?php echo $this->form->foo->renderErrors(); ?>
                    </td>
                    [ ... ]
                </tr>
            </tbody>
        </table>

jQuery :

$("#ajout_regle").click(function(){
    $( ".template" )
    .clone() // Edit : I forgort it when I copy / past my code !                            
    .first()                                    
    .appendTo( "#listTable tbody" )     
    .addClass('regle')             
    .find("input[type='text']").val("");         
});

对于 IE8，它工作得很好，该行在 tbody 中正确添加并正确显示。但是在 FF 中，所有行都显示在第一列中，而表格的其余部分是空的...我认为 display : none/block 与此有关，但不知道为什么。

最佳答案

我会克隆它，然后删除模板类

如果 regle 类中没有其他内容，则不需要它，因为无论如何行都不应该显示 block (感谢 matt)

$("#ajout_regle").click(function(){
    $( ".template" )                            
    .clone()                                    
    .appendTo( "#listTable tbody" )     
    .removeClass("template") // .addClass('regle')
    .find("input[type='text']").val("");         
});
.template {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="ajout_regle">Ajout</button>
<table class='w100' cellspacing='0' cellpadding='0' id='listTable'>
  <thead>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>foobar</th>
    </tr>
  </thead>
  <tbody>
    <tr class="template">
      <td>
        Bla
      </td>
    </tr>
  </tbody>
</table>

关于javascript - appendTo 没有将我的元素放在我想要的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27523330/

javascriptappendTogtltsectionjquerycssclone

有关javascript - appendTo 没有将我的元素放在我想要的位置的更多相关文章

  1. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  2. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  3. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  4. 没有类的 Ruby 方法？ - 2

    大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？ 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法？，我们在StackOverflow

  5. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  6. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  7. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  8. ruby - 没有类方法获取 Ruby 类名 - 2

    如何在Ruby中获取BasicObject实例的类名？例如，假设我有这个:classMyObjectSystem我怎样才能使这段代码成功？编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它？ 最佳答案 我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象

  9. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  10. ruby - 没有轨道的 ActiveRecord 时区 - 2

    我在非Rails项目中使用ActiveRecord。在Rails中，我可以这样做:config.time_zone='EasternTime(US&Canada)'config.active_record.default_timezone='EasternTime(US&Canada)'但如果我不使用rails，我该如何设置时区？ 最佳答案 ActiveRecord::Base.default_timezone='EasternTime(US&Canada)' 关于ruby-没有轨道的A

随机推荐