时间戳

首页 > 解决方案 > 可以在javascript中复制项目的错误按钮：不显示值

javascript - 可以在javascript中复制项目的错误按钮：不显示值

问题描述

我是 javascript 新手，我需要为我的项目创建一个重复按钮：我有一个包含不同类型结果的复选框列表，当其中一个被选中时，我想要一个按钮来复制这个结果。我做了这样的事情：

%input.checkbox#finding_id{ :type=>"checkbox", :name=>"#{finding.id}" }

%a.btn.btn-success#addd{ :href => "#", :onclick => "duplicate()" }
%i.icon-plus.icon-white{ :title => "Add" }

:javascript
 document.getElementById('addd').click = duplicate;
 var i = 0;
 var original = document.getElementById('inf_#{finding.id}');

 function duplicate() {
 var clone = original.cloneNode(true);
 clone.id = "inf_#{finding.id}" + ++i;
 original.parentNode.appendChild(clone);
 }

但我认为我有一个语法问题，它无法识别为 haml 中的每一行创建动态 ID 的“inf_#{finding.id}”。

标签： javascripthaml

解决方案

从您上次的屏幕截图来看，您的复选框似乎在表格中，因此当您选择它时，您没有整行，而只有列中的元素。我建议您了解CSS 选择器以实现复制整行的目标。您可以使用以下功能：
document.querySelector("your Css selector here !")获取您想要的 DOM 节点。

如果我错了，请纠正我，但我认为没有简单的方法来选择元素的父节点。假设您有这张桌子： 

 <table style="width:100%">
  <tr>
    <th>Checkbox</th>
    <th>Label</th>
    <th>Level</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="firstCheckbox"></td>
    <td>My first checkbox</td>
    <td>50</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="secondCheckbox"></td>
    <td>My second checkbox</td>
    <td>94</td>
  </tr>
</table>

您可能无法通过获取复选框元素本身来获取整行，因为您无法获取其父节点。因此，您可能想要更改您的表格，以便更容易使用：

 <table style="width:100%">
  <tr>
    <th>Checkbox</th>
    <th>Label</th>
    <th>Level</th>
  </tr>
  <tr id="myFirstRow">
    <td><input type="checkbox"></td>
    <td>My first checkbox</td>
    <td>50</td>
  </tr>
  <tr id="mySecondRow">
    <td><input type="checkbox"></td>
    <td>My second checkbox</td>
    <td>94</td>
  </tr>
</table>

现在您可以使用以下 JS 代码轻松获取您的行：
var secondRow = document.querySelector("#mySecondRow");

这可能不是这里最好的选择，但它只是给你一个例子，说明你可以用 Css Selector 做什么。

由于您是 JS 新手，您应该继续查看 w3schools 网站，因为它包含大量信息。

编辑：正如 Chris Satchell 所说，您仍然可以在 JavaScript 中获取它（使用 parentNode）：document.getElementById('firstCheckbox').parentNode。

推荐阅读