セル内のボタンが指定された行IDを取得する

Question

私は、削除するために使用したい各行の最後にボタンを含むJSONオブジェクトからの情報を格納するループでセルが作成されたDOM作成テーブルを持っています行。私の行はすべて固有のIDを持っています。私の計画では、行IDをボタンクリックの関数に渡して、データベースの行だけでなくページの行も削除できます。

しかし、ボタンだけで行のIDを取得する方法はわかりません。

Answer 1

私はあなたがボタンを含むすべてのコードを書くことができるように、.innerHTMLのようなものを使用しているか、要素を追加していると仮定しています。ボタンを書くときは、onlick onclick=deleteFunction(idOfRow)を入れます。ここでidOfRowに行のIDを書きます。次に、それを使って削除する行を知ることができます。

Answer 2

jQueryを使用している場合、ボタンidを渡すとクリックした特定のボタンの行要素が返され、 'domElementId'がボタンidに置き換えられます。ボタンを削除するの行にある場合

$('#domElementId').closest('tr'); 

Answer 3

は、その後、あなたはIDを使用せずに行を識別するために、DOM構造を使用することができます。あなたはそれようの関数にこのを渡すことができ、ボタンから次に

：ボタンから、あなたはそれが特定のタグ名を持つ要素に到達するまで与えられたルートからDOMを上昇件までの機能を使用することができますDOMをTRノードに上げてから削除します。例えば。

/* Starting from a node, ascend the DOM until the first parentNode 
 
** with a particular tagName is encountered. 
 
** @param {DOMElement} node - node to start from 
 
** @param {string} tagName - tag name of node to return 
 
** @returns {DOMElement/null/undefined} 
 
**   - If matching element is found, returns the node. 
 
**   - If no match found, returns null 
 
**   - If either parameter not provided, returns undefined 
 
*/ 
 
function upTo(node, tagName) { 
 
    if (!node || !tagName) return; 
 
    tagName = ('' + tagName).toLowerCase(); 
 
    while ((node = node.parentNode) && node.tagName) { 
 
    if (node.tagName.toLowerCase() == tagName) { 
 
     return node; 
 
    } 
 
    } 
 
    return null; 
 
} 
 

 
function deleteRow(node) { 
 
    var row = upTo(node, 'tr'); 
 
    if (row) row.parentNode.removeChild(row); 
 
}

<table> 
 
    <tr><td><button onclick="deleteRow(this)">Delete row</button>row 0 
 
    <tr><td><button onclick="deleteRow(this)">Delete row</button>row 1 
 
    <tr><td><button onclick="deleteRow(this)">Delete row</button>row 2 
 
</table>