如何引用表格中的元素

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後，我想在中...在最後在此處添加DELETED LINK。

Answer 1

嘗試添加一個id到你的td，然後你可以在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>