Question

我尝试复制现有列，并将其附加到列的末尾。请指教。

http://jsbin.com/hucifuwuwo/1/edit?html,js,output

  <table id="myTable" cell>
    <tbody>
    <tr id="test"><td contenteditable="true"></td><td contenteditable="true">Names</td></tr>
      </tbody>
  </table>
<input id="addrow" type="button" value="Add Row">
<input id="addcolumn" type="button" value="Add Column">
$(function(){
  $("#addrow").click(function(){
    $("#myTable tr:last").after($("<tr><td></td><td></td></tr>"));
  });
  $("#addcolumn").click(function(){
    $("#myTable tr:last").append($("<tr><td></td><td></td></tr>"));
  });

});

Answer 1

实际上，对于您想要的解决方案，您的添加行不正确。

修正了您的行添加
修复了每个单元格的contenteditable属性

$(function(){
  $("#addrow").click(function(){
    var tr = "<tr>" + "<td contenteditable='true'></td>".repeat($("#myTable tr:eq(0) td").length) + "</tr>"
    $("#myTable").append(tr);
  });
  $("#addcolumn").click(function(){
    $("#myTable tr").append($("<td contenteditable='true'></td>"));
  });
});

table,tr,td
{
  border: 1px solid gray;
  border-collapse: collapse;
  padding:10px;
  margin-bottom:1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  <table id="myTable" cell>
    <tbody>
    <tr id="test"><td contenteditable="true"></td><td contenteditable="true">Names</td></tr>
      </tbody>
  </table>
<input id="addrow" type="button" value="Add Row">
<input id="addcolumn" type="button" value="Add Column">
  </body>
</html>

Answer 2

我不太确定你的问题是什么，但是这段代码可能会这样做，知道你究竟需要什么：

$(function(){
  $("#addrow").click(function(){
    $("#myTable tr:last").after("<tr></tr>");
    $("#myTable tr:nth-child(1) td").each (function (){
    $("#myTable tr:last").append("<td></td>")
    });    
  });
  $("#addcolumn").click(function(){
    $("#myTable tr").append("<td></td>");
  });  
});

Link to JSbin

Answer 3

您可以使用vanilla JS方法document.createElement与jQuery .append结合使用

  $("#addcolumn").click(function(){
    $("#myTable tr:last").append(document.createElement('td'));
  });

检查this fiddle是否有实时演示

Answer 4

更改您的addcolumn点击功能，如下所示

$("#addcolumn").click(function(){
    $("#myTable tr").append($("<td></td>"));

  });

希望这有帮助

如何使用jquery在表中添加列？

4 个答案: