有没有办法使用jquery克隆表的列?

时间:2016-11-21 15:03:23

标签: javascript jquery clone

我尝试从表中克隆现有列。我不知道我的代码在哪里犯了错误。



    $(function() {
      $("#we").click(function() {
        $("table tr:last").after('<tr></tr>');
        $('table tr:nth-child(1) td').each(function() {
          $('table tr:last').append('<td><input type="text"/></td>');
        });
      });
      $('#addcolumn').click(function() {
        var ae = $('table tr').find('td:eq(1)').clone();
        $('table td').each(function() {
          $('table tr').append(ae);
        });

      });
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<input id='we' type="button" value="Submit" />
<input type="button" value="AddColumn" id='addcolumn' />
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

你这太复杂了。只需循环遍历所有tr元素,并附加第一个td

的克隆
$('#addcolumn').click(function() {

    $('table tr').each(function() {
      $(this).append($(this).find('td:first').clone());
    });

});

下面的实例。

$(function() {
      $("#we").click(function() {
        $("table tr:last").after('<tr></tr>');
        $('table tr:nth-child(1) td').each(function() {
          $('table tr:last').append('<td><input type="text"/></td>');
        });
      });
      $('#addcolumn').click(function() {
        
        $('table tr').each(function() {
          $(this).append($(this).find('td:first').clone());
        });

      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<input id='we' type="button" value="Submit" />
<input type="button" value="AddColumn" id='addcolumn' />