動的に作成されたボタンのイベントをクリックします。

HTMLテーブルを作成する関数（最下部に表示されます）があり、配列の内容に応じてX個の行が設定されます。各行には2つのセルがあり、その位置にある配列の値とそれに隣接するボタンがあります。動的に作成されたボタンのイベントをクリックします。

これらのボタンをクリックして、テーブルから特定の行を削除できます。それはエラーがスローされますので、IDが存在しないことを

function unMatchButtonClicked(){ 
    var button = document.getElementById('unmatch').onclick; 

}

と私は潜在的に行のX番号を持っているので、私はいくつかの並べ替えをする必要があります：

しかし、私は、クリックイベントの標準を使用するカントのforループ。

私の擬似試みは、次のとおりです。

for (var i=0; i < table.length; i++){ 
    var button = document.getElementById('unmatch') 
    if (button.clicked){ 
    remove row} 
}

私もそれをかなりビジョンを行うことはできませんか。

純粋なJSソリューションだけでなく、Jqueryもありません。

EDIT：

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    for (var i = 0; i < array.length; i++) { 
     var row = document.createElement('tr'); 
     var cell = document.createElement('td'); 
     cell.textContent = array[i]; 
     row.appendChild(cell); 
    cell = document.createElement('td'); 
     var button = document.createElement('button'); 
     button.setAttribute("id", "unMatchButton" +i); 
     cell.appendChild(button); 
     row.appendChild(cell); 
     table.appendChild(row); 
    } 
    return table; 
}

出典

2016-10-14 The worm

「私はHTMLのテーブルを作成し、配列の内容に応じて、それが行のX番号を移入する関数を持っている。」ポストとしても機能し、そうでない場合、私は」あなたの問題が何であるかということを推測する*問題が*何かを見つけることができない*。 – zer00ne

複数のボタンがある場合はidを使用できません。クラスまたは属性を使用する必要があります。idは固有の識別子です。とにかく@ zer00neはあなたの実際の機能を投稿しなければならないと言ったか、われわれは理解できません。 –

@ zer00neはそれを追加しました –

あなたがaddEventListener()を使用して要素を作成したときにイベントを追加します。

... 
var button = document.createElement('button'); 
button.setAttribute("id", "unMatchButton" +i); 

button.addEventListener("click", clickEventFunction, false); 
...

・ホープ、このことができます。

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 
    table.setAttribute("border", 1); 
 

 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td'); 
 
    
 
    var button = document.createElement('button'); 
 
    button.setAttribute("id", "unMatchButton" + i); 
 
    button.textContent = "Delete"; 
 

 
    //click Event 
 
    button.addEventListener("click", delete_row, false); 
 
    
 
    cell.appendChild(button); 
 
    row.appendChild(cell); 
 
    table.appendChild(row); 
 
    } 
 

 
    return table; 
 
} 
 

 
function delete_row() { 
 
    this.parentNode.parentNode.remove(); 
 
} 
 

 
document.body.appendChild(makeHTMLMatchesTable(['Cell 1','Cell 2','Cell 3','Cell 4']));

出典

2016-10-14 09:53:37

これはすばらしい、ありがとうございます。（私のコードを最小限に変更した素晴らしい答え） –

<table>にclickハンドラを追加します。クリックが<button>によってトリガーされた場合は、event.targetを確認できます。はいの場合は、周囲の<tr>要素に到達するまでDOMを移動し、.remove()と呼び出します。

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 

 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td'); 
 
    var button = document.createElement('button'); 
 
    button.setAttribute("id", "unMatchButton" + i); 
 
    button.textContent = "Remove"; 
 
    cell.appendChild(button); 
 
    row.appendChild(cell); 
 
    table.appendChild(row); 
 
    } 
 

 
    table.addEventListener("click", removeRow, false); 
 

 
    return table; 
 
} 
 

 
function removeRow(evt) { 
 
    if (evt.target.nodeName.toLowerCase() === "button") { 
 
    evt.target.parentNode.parentNode.remove(); // .parentNode.parentNode == <tr> 
 
    } 
 
} 
 

 
document.body.appendChild(makeHTMLMatchesTable([1, 2, 3, 4]));

出典

2016-10-14 09:53:44 Andreas

私が+1しようとしていた解決策 – Shaggy

詳細はソース内にコメントされています。利用可能なのはPLUNKERです。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table, 
 
    td { 
 
     border: 1px solid red; 
 
    } 
 
    button { 
 
     height: 24px; 
 
     width: 24px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <script> 
 
    var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
    function makeHTMLMatchesTable(array) { 
 
     var table = document.createElement('table'); 
 
     for (var i = 0; i < array.length; i++) { 
 
     var row = document.createElement('tr'); 
 
     var cell = document.createElement('td'); 
 
     cell.textContent = array[i]; 
 
     row.appendChild(cell); 
 
     cell = document.createElement('td'); 
 
     var button = document.createElement('button'); 
 
     button.setAttribute("id", "unMatchButton" + i); 
 
     cell.appendChild(button); 
 
     row.appendChild(cell); 
 
     table.appendChild(row); 
 
     } 
 
     // This is added to comlete this function 
 
     return document.body.appendChild(table); 
 
    } 
 

 
    makeHTMLMatchesTable(array1); 
 

 
    // Reference table 
 
    var table = document.querySelector('table'); 
 

 
    /* 
 
    | - Add an eventListener for ckick events to the table 
 
    | - if event.target (element clicked; i.e. button) 
 
    | is NOT the event.currentTarget (element that 
 
    | is listening for the click; i.e. table)... 
 
    | - ...then assign a variable to event.target's 
 
    | id (i.e. #unMatchButton+i) 
 
    | - Next extract the last char from the id (i.e. from 
 
    | #unMatchButton+i, get the 'i') 
 
    | - Then convert it into a real number. 
 
    | - Determine the row to which the button (i.e. event 
 
    | .target) belongs to by using the old rows method. 
 
    | - while row still has children elements... 
 
    | - ...remove the first child. Repeat until there are 
 
    | no longer any children. 
 
    | - if the parent of row exists (i.e. table which it 
 
    | does of course)... 
 
    | - ...then remove row from it's parents 
 
    */ 
 
    table.addEventListener('click', function(event) { 
 
     if (event.target !== event.currentTarget) { 
 
     var clicked = event.target.id; 
 
     var i = clicked.substr(-1); 
 
     var idx = Number(i); 
 
     var row = this.rows[idx]; 
 
     while (row.children > 0) { 
 
      row.removeChild(row.firstChild); 
 
     } 
 
     if (row.parentNode) { 
 
      row.parentNode.removeChild(row); 
 
     } 
 
     return false 
 
     } 
 
    }, false); 
 
    </script> 
 
</body> 
 

 

 
</html>

出典

2016-10-14 12:31:47 zer00ne

動的に作成されたボタンのイベントをクリックします。

答えて

関連する問題