从单元格

Question

我正在创建一个包含表格的页面，其中每个td都可以通过点击进行编辑。

每个td的onclick是以下js函数：

var createInput = function (e) {
    e.innerHTML = "<button id = 'option1' onclick = updateComplete(this)><span>Complete</span></button><button id = 'option2' onclick = updatePartial()><span>Partial</span></button>";
    setRowHeights(); //not important
}

所以td最终看起来像这样：

<td title="Y" id="0:2" onclick="createInput(this)" class="options">
    <button id="option1" onclick="updateComplete(this)">
        <span>Complete</span>
    </button>
    <button id="option2" onclick="updatePartial()">
        <span>Partial</span>
    </button>
</td>

如果＆＃34;完成＆＃34;单击按钮我想要改变整个单元格的innerHTML，以便它只是说出单词＆＃34;完成＆＃34;：

var updateComplete = function (e) {
    var cell = e.parentElement
    cell.innerHTML = "complete";
}

然而，这不起作用。什么都没有发生，除非我在Chrome中查看元素，td和按钮的标签会发出粉红色：

然而，

如果我在td上执行第一个clcik以便按钮出现，那么运行另一个显式引用单元格id的函数...

var updateCompleteOther = function () {
    var cell = document.getElementById("0:2");
    cell.innerHTML = "complete";
}

......它有效。

为什么我不能从td内的按钮更改td的innerHTML？

Answer 1

为您创造了一个小提琴：https://jsfiddle.net/szn21qcx/

您缺少的是event.stopPropagation();

它可以防止事件冒泡DOM树，防止任何父处理程序被通知事件。

function updateComplete (e, ctrl) {
    var cell = ctrl.parentElement;
    cell.innerHTML = "complete";
    e.stopPropagation();
}

您可以从here

了解有关事件传播的更多信息