带有DOM while循环事件的锚标记始终返回表中的最后一行element.parentNode

问题描述 投票：0回答：1

我有一个表，其中每一行在添加了<a>事件的第一列中都包含一个onclick标记。该事件触发一个函数，该函数检查第一个parentNode是否等于<tr> html行标记。该函数的工作方式是始终找到tr parentNode，但是由于某种原因，它总是在表的最后一行中找到<tr>标记。我不明白为什么，因为表结构意味着第一个parentNode将是<td>标记，然后是触发事件的当前行的<tr>标记：

<table>
    <thead>
        <th>Accept</th>
        <th>Value</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="#">Push 1</a>
            </td>
            <td>Val 1</td>
        </tr>
        <tr>
            <td>
                <a href="#">Push 2</a>
            </td>
            <td>Val 2</td>
        </tr>
        <tr>
            <td>
                <a href="#">Push 3</a>
            </td>
            <td>Val 3</td>
       </tr> <!--alway returns the last row-->
    </tbody>
</table>

我在window.onload{buildTable();}函数which works中构建表时绑定了onclick事件。这是一个代码段：


    mycurrent_row = document.createElement("tr");
    // creates a <td> element
    mycurrent_cell = document.createElement("td");
    // create anchor element
    mybut = document.createElement("a");
    // set anchor text
    buttext = document.createTextNode("Push " + key);
    // append text to anchor
    mybut.appendChild(buttext);
    // set href attribute of anchor
    mybut.setAttribute("href", "#");
    // set event to anchor
    mybut.onclick = () => {MYMODCLASS.findParent(mybut, "tr");}
    // appends the Text Node we created into the cell <td>
    mycurrent_cell.appendChild(mybut);


    // find closest parentnode by tagname
    MYMODCLASS.findParent = function (el, tag) {
        while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
            console.log(el.parentNode);
            el = el.parentNode;     
        } return el;
    }

我可以使用jQuery轻松完成此操作，但不能在此项目上执行。它必须是纯JavaScript的解决方案。有人可以告诉我为什么总是返回最后一行parentNode吗？

javascript html dom while-loop
1个回答
0
投票

一种非常简单的方法，可以对现有的静态表执行类似的操作。

document.getElementsByTagName("table")[0].onclick = function () {
  findParent(event.srcElement, "tr");
}
// find closest parentnode by tagname
function findParent(el, tag) {
    while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
        console.log(el.parentNode.outerHTML
          .replace(/[\n\s]{2,}/g, '') // short resut a bit
        );
        el = el.parentNode;
    }
    return el;
}
<table>
  <thead>
    <th>Accept</th>
    <th>Value</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#">Push 1</a>
      </td>
      <td>Val 1</td>
    </tr>
    <tr>
      <td>
        <a href="#">Push 2</a>
      </td>
      <td>Val 2</td>
    </tr>
    <tr>
      <td>
        <a href="#">Push 3</a>
      </td>
      <td>Val 3</td>
    </tr>
  </tbody>
</table>

从头开始建立表。

// find closest parentnode by tagname
function findParent(el, tag) {
    while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
        console.log(el.parentNode.outerHTML);
        el = el.parentNode;
    }
    return el;
}

function buildTab() {
  var el0 = document.createElement('THEAD');
  var el1 = document.createElement('TH');
  el1.innerText = 'Accept';
  el0.appendChild(el1); // THEAD <- TH
  el1 = document.createElement('TH');
  el1.innerText = 'Value';
  el0.appendChild(el1); // THEAD <- TH
  el1 = document.createElement('TABLE');
  el1.appendChild(el0); // TABLE <- THEAD
  el0 = document.createElement('TBODY');
  el1.appendChild(el0);  // TABLE <- TBODY
  var keys = [1,2,3];
  for(var i in keys) {
    var el2 = document.createElement('TR');
    el0.appendChild(el2); // TBODY <- TR
    var el3 = document.createElement('TD');
    el2.appendChild(el3); // TR <- TD
    var el4 = document.createElement('A');
    el4.href='#';
    el4.innerText = 'Push ' + keys[i];
    el4.onclick = function () { findParent(this, 'TR') }
    el3.appendChild(el4); // TD <- A
    el3 = document.createElement('TD');
    el3.innerText = 'Val ' + keys[i];
    el2.appendChild(el3); // TR <- TD
    el0.appendChild(el2); // TBODY <- TR
  }
  document.body.appendChild(el1); // BODY <- TABLE
}
<body onload="buildTab()">
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.