Question

当在下拉列表中的菜单值上单击鼠标时，我想标识HTML表单元格。使用W3schools代码，我可以获得有关单元格的信息，但不能从单元格中的下拉列表中获得。此处某处的DOM错误设置。

C: 67
a: 97
t: 116

针对HTML表格的一个单元格使用以下代码：

<html>
    <td onclick=myFunction5(this)>OPEN</td>
</html>

<script>
function myFunction5(x) {
   alert("Cell index is: " + x.cellIndex);
</script>

现在我需要从另一个函数中获取单元格ID：-

<td id = "td01" onclick=myFunction5(this)>
    <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
            <p onclick = "displayTableData()">OPEN </p>          
            <p onclick = "displayTableData()">Closed</p>
        </div>
     </div>
</td>

警报-单元格索引为：未定义

Answer 1

据我了解，您有一个表格单元格，其中带有菜单结构。您想通过单击菜单来确定菜单所在的表格单元格，这可以通过从事件目标上移DOM直到到达该单元格（或祖先用完）来实现。

如果动态附加侦听器会更容易，那么侦听器中的 this 将是被单击的元素。否则，您必须传递 this 或事件，例如

<p onclick="displayTableData(this)">Closed</p>

或

<p onclick="displayTableData(event)">Closed</p>

以下内容将助您一臂之力：

// Attach listeners
window.onload = function() {
  var nodes = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayTableData, false)
  );
}

/* Return first ancestor of node that has tagName
** @param {HTMLElement} node - node to start from
** @param {string} tagName - tag name of element to find
** @returns {HTMLElement|undefined} - first matching ancestor or null if none found
*/
function getAncestor(node, tagName) {
  if (!node || !tagName) return;
  while (node.parentNode) {
    node = node.parentNode;
    if (node.tagName && node.tagName.toLowerCase() == tagName) {
      return node;
    }
  }
  return null;
}

function displayTableData(evt) {
  // Stop bubbling
  evt.stopPropagation();
  var cell = getAncestor(this, 'td');
  console.log(`cellIndex: ${cell && cell.cellIndex}`);
}

function myFunction5(node) {
  console.log(`myFunction5: ${node.tagName} ${node.cellIndex}`);
}

<table>
  <tr>
    <td id="td01" onclick="myFunction5(this)">
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN </p>
          <p>Closed</p>
        </div>
      </div>
    </td>
  </tr>
</table>

还有element.closest，应该在上述方面提供合理的支持。

// Attach listeners
window.onload = function() {
  var nodes = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayTableData, false)
  );
}

function displayTableData(evt) {
  // Stop bubbling
  evt.stopPropagation();
  var cell = this.closest('td');
  console.log(`cellIndex: ${cell && cell.cellIndex}`);
}

function myFunction5(node) {
  console.log(`myFunction5: ${node.tagName} ${node.cellIndex}`);
}

<table>
  <tr>
    <td id="td01" onclick="myFunction5(this)">
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN </p>
          <p>Closed</p>
        </div>
      </div>
    </td>
  </tr>
</table>

使用onclick从另一个函数中调用一个函数

1 个答案: