テーブル内の要素を参照する方法

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後で、私は内にしたいです...最後に削除されたリンクはこちら。

Answer 1

あなたのIDに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
• がリンクにそのdata-delete属性を与えるリンクのonclick
• にdelIt機能を割り当てるクラス
• クローンのリンクを与えます削除する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>