Coffeescript to manipulate DOM with jQuery

Question

我想在现有行的基础上在表中添加一行。我试着用咖啡脚本来做，但它根本不起作用。

我想我误解了插入在嵌套div字段中的工作方式。因为如果元素没有任何较低级别的组件，我可以移动它们。。

因此，如果你能看到我做错了什么——请提出建议，如果你能够就如何更改添加元素的ID提出建议，我也将不胜感激。。

这是咖啡脚本和html

$(".add_row").click ->
	jQuery ->
    	$("#row1").clone().appendTo($("#row3"))
	alert "Done"

<table>
  <div id="row1">
    <tr>       <td> r1c1 </td>       <td> r1c2</td>     </tr>
  </div>
  <div id="row2">
    <tr>       <td> r2c1</td>      <td> r2c2 </td>     </tr>
  </div>
  <div id="row3">
    <tr>     <td> r3c1 </td>       <td> r3c2</td>     </tr>
  </div>
  <tr>
    <td>-</td>   <td> <button class="add_row"> Add Another Row </button> </td>
  </tr>
</table>

Answer 1

您的HTML无效，因此浏览器可能会重写它，并为您丢弃所有内容。

来自精细规格：

允许的内容
一个可选的caption元素，后面跟着零个或多个colgroup元素，后面跟一个可选thead元素，后面是

一个tfoot元素，后面跟着零个或多个tbody元素，或一个或多个子tr元素

或

零个或多个tbody元素、或一个或多个子tr元素然后是可选的tfoot元件

特别是，<table><div>无效。当您的jQuery开始使用<table>时，#row1根本不会在表中，它可能不会包含您期望的内容。

有效的HTML很重要，所以修复HTML:

<table>
  <tr id="row1">
    <td> r1c1 </td>
    <td> r1c2 </td>
  </tr>
  <tr id="row2">
    <td> r2c1 </td>
    <td> r2c2 </td>
  </tr>
  <tr id="row3">
    <td> r3c1 </td>
    <td> r3c2 </td>
  </tr>
  <tr>
    <td>-</td>
    <td> <button class="add_row"> Add Another Row </button> </td>
  </tr>
</table>

然后你会想修复你的CoffeeScripts。首先是缩进，它需要一致和正确，因为缩进定义了CoffeeScript的结构。此外，内部jQuery ->调用是不必要的，它用于在文档准备好使用时排队调用函数，但您只想在单击按钮时立即运行一些代码。此外，您不希望使用appendTo，因为它会：

将匹配元素集中的每个元素插入到目标的末尾。

您希望将克隆的行放在#row3之后，而不是放在其内部。您最好使用after并从#row3开始，如下所示：

$(".add_row").click ->
    $('#row3').after($('#row1').clone())

这仍然会给你留下一些问题，特别是：

1. 您将有重复的#row1元素
2. 再次点击按钮将在#row3之后继续添加新行，而不是在按钮行的正上方

我将把修复这些留给读者练习。

例如：https://jsfiddle.net/ambiguous/ksndgdpa/