Question

我想根据现有行在表格中添加一行。我试图用coffeescript做 - 但它只是不起作用。

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

所以，如果你能看到我做错了什么 - 请提供建议，如果你能就如何更改添加元素的ID，我也会感激不尽。

这是coffeescript和html

＆＃13;

OVER_QUERY_LIMIT

＆＃13;

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

＆＃13;

Answer 1

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

来自fine specification：

允许的内容
  可选的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())

这仍然会给您带来一些问题，特别是：

您将拥有重复的#row1元素。
再次按下该按钮将继续在#row3之后而不是在按钮行的正上方添加新行。

我会把这些作为练习留给读者。

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

使用jQuery操作DOM的Coffeescript

1 个答案: