javascript - 有没有办法使用 jquery 克隆表的列？

Question

我试图从表中克隆现有的列。我不知道我的代码哪里出错了。

    $(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);
        });

      });
    });

<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' />

Answer 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' />