Question

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

然而，我无法弄清楚如何仅使用按钮获取行的id。

Answer 1

我假设您使用的是.innerHTML或添加元素，以便您可以编写所有代码，包括按钮。当您编写按钮时，请单击on onclick=deleteFunction(idOfRow)，在其中您将在idOfRow中写入行的ID。然后使用它来知道要删除哪一行。

Answer 2

鉴于您正在使用jQuery，如果您传入按钮ID，则下面将返回您单击的特定按钮的row元素，替换＆＃39; domElementId＆＃39;用你的按钮ID。

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

Answer 3

如果按钮位于要删除的行中，则可以使用DOM结构来识别行而不使用ID。从按钮，您可以使用 upTo 函数从给定的根中提升DOM，直到它到达具有特定标记名称的元素：

然后从按钮中你可以将 this 传递给函数，这样它就可以将DOM上传到TR节点，然后将其删除。 E.g。

＆＃13;

/* 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);
}

＆＃13;

<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>

＆＃13;

在单元格DOM中给出一个按钮获取行ID

3 个答案: