Question

我需要帮助。我想弄清楚如下：

<script>
var ct = 1;
function new_bank()
{
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// bank to delete extended form elements
var delLink = '<a href="javascript:delIt('+ ct +')">delete</a>';

div1.innerHTML = 
document.getElementById("newbanktpl").innerHTML + delLink;
document.getElementById('newbank').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newbank');
parentEle.removeChild(ele);
findTotalA();
}
</script>


<!-- Template -->
<div id="newbanktpl">
<table>
<tr>
  <td></td>
  <td><textarea name="BankAccount[]"></textarea></td>
  <td><input type="number" onblur="findTotalA()" name="Value[]"/></td>
  <td><input type="number" name="Ownership[]" /></td>
  <td>**ADD DELETED LINK HERE** </td>
</tr>
</table>

我所追求的是删除功能在表格内 - 目前删除功能在newbanktpl之后，我想在...内部...在最后 ADD DELETED LINK HERE 。

Answer 1

尝试在你的td中添加一个id，然后你可以在JS中使用它。

在您的HTML中

<table>
    <tr>
        ...
        <td><a href="#" id="delete">delete</a></td>
    </tr>
</table>

在script标记
中

...
document.getElementById("delete").href="javascript:delIt('+ ct +')";
...

整个函数应如下所示：

var ct = 1; 

function new_bank() {
    ct++; 
    var div1 = document.createElement('div');
    div1.id = ct;

    document.getElementById("delete").href="javascript:delIt('+ ct +')"; 
    document.getElementById('newbank').appendChild(div1); 
}

P.S。我不知道为什么你试图通过调用具有如此短名称的变量来保存计算机中的字节，它是你的时间的腰部，它不会对计算机产生任何影响，但它让你更难理解你的代码。

Answer 2

为模板中的链接提供一个类
克隆模板
更新div的ID
将delIt功能分配给链接的onclick
为链接指定一个data-delete属性，该属性引用要删除的ID。
在插入的最后一个银行之后插入克隆
将克隆指定为新的“最后一行”

var ct = 1;
var tmpl = document.getElementById("newbanktpl");
var lastBank = tmpl;

function new_bank() {
  var clone = tmpl.cloneNode(true);
  clone.id = "bank_" + ct;
  ct++;

  var delLink = clone.querySelector(".delete_link");
  delLink.setAttribute("data-delete", clone.id);
  delLink.onclick = delIt;

  lastBank.parentNode.insertBefore(clone, lastBank.nextSibling);
  lastBank = clone;
}

// function to delete the newly added set of elements
function delIt() {
  var id = this.getAttribute("data-delete");
  var ele = document.getElementById(id);
  if (ele === lastBank) {
    lastBank = ele.previousElementSibling;
  }
  ele.parentNode.removeChild(ele);
  //  findTotalA();
}

#newbanktpl {
  display: none;
}

<!-- Template -->
<div id="newbanktpl">
  <table>
    <tr>
      <td></td>
      <td><textarea name="BankAccount[]"></textarea></td>
      <td><input type="number" onblur="findTotalA()" name="Value[]" /></td>
      <td><input type="number" name="Ownership[]" /></td>
      <td><a class="delete_link" href="#">delete</a></td>
    </tr>
  </table>
</div>

<button onclick="new_bank()">New Bank</button>

如何引用表

2 个答案: