获取行ID给定一个单元格中的按钮DOM

Question

我有一个DOM创建的表，其单元格是用一个循环创建的，该循环存储来自JSON对象的信息，每行的末尾有按钮，我想用它们来删除一排。我所有的行都有唯一的ID，我的计划是将行ID传递给按钮单击的函数，以便我可以删除数据库中的行以及我的页面上的行。

但是，我无法弄清楚如何只用按钮来获取行的id。

Answer 1

我假设你正在使用类似.innerHTML的东西或添加一个元素，以便你可以编写所有的代码，包括按钮。当您编写该按钮时，请输入onlick onclick=deleteFunction(idOfRow)，您将在此处编写idOfRow中该行的ID。然后使用它来知道要删除哪一行。

Answer 2

鉴于您使用的是jQuery，如果您传递按钮ID，则下面的代码将返回您点击的特定按钮的行元素，用您的按钮ID替换'domElementId'。

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

Answer 3

如果按钮位于要删除的行中，那么您可以使用DOM结构来标识该行而不使用ID。

然后从按钮，您可以通过这个如此它的功能：从按钮，可以直到它达到与特定标签名称的元素使用高达功能上升从一个给定根的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>