jQuery克隆表行 - 只有一半工作

时间:2014-11-27 13:00:24

标签: javascript jquery codeigniter

对于jQuery,我是一个非常基本的新手。我通常可以通过搜索片段并根据自己的需要进行修改来找到自己的方式。

这是我无法理解的。我有一个div,有3个嵌套的div,然后每个嵌套的div都有一个表,后跟一个链接。

<div id="exercise_container">
  <div class="weight_reps" style="border: 1px gray dashed">
    <h3 colspan="3"></h3>
    <table>
      <tr>{headers}</tr>
      <tr>{some data}</tr> 
      <tr>{some data}</tr>
    </table>
    <a class="addSet" href="#"></a>
  </div>
  <div class="weight_reps" style="border: 1px gray dashed">
    <h3 colspan="3"></h3>
    <table>
      <tr>{headers}</tr>
      <tr>{some data}</tr> 
      <tr>{some data}</tr>
    </table>
    <a class="addSet" href="#"></a>
  </div>
  <div class="weight_reps" style="border: 1px gray dashed">
    <h3 colspan="3"></h3>
    <table>
      <tr>{headers}</tr>
      <tr>{some data}</tr> 
      <tr>{some data}</tr>
    </table>
    <a class="addSet" href="#"></a>
  </div>
</div>

链接是克隆表格的第二行并将其修改到底部(加上其他一些东西,但这里的基本功能很奇怪)。

这是点击链接时执行的jQuery:

<script>
someCounter = 1;
$(document).ready(function() {
  $('.addSet').click(function(e) {
    e.preventDefault();
    var $table = $(this).prev("table");
    var $row = $table.find('tr:eq(2)');
    var $clonedRow = $row.clone(true);
    $clonedRow.hide();
    $table.append($clonedRow);
    $clonedRow.show('slow');    
    someCounter++;
  });
});
</script>

现在,这适用于前两个 div,即点击时,会在其部分的表中添加一个额外的行...但它在3日不起作用!我不明白为什么。我在Codeigniter中这样做,所以div都以相同的方式生成。

希望有人可以提供帮助。

提前致谢。

1 个答案:

答案 0 :(得分:0)

我已经将你的html和javascript粘贴并粘贴到Jsfiddler并编辑了一些部分以使其正常工作

  1. 你的html中有接缝错误,当你在JSfiddler中粘贴html时,它突出显示了我做的第一个div的结束标记 是用第二个div代替第一个div(因为你说的是​​div 是完全相同的)
  2. 我也改变了表的结构,在列(标签)中添加数据,而不是直接放置数据 在一行内,因为jquery没有接缝能够选择 在没有
  3. 的情况下添加表格行
  4. 我也删除了someCounter变量,因为它没有在任何地方使用
  5. 您可以在http://jsfiddle.net/ttscy06h/ enter code here

    找到解决方案