从单元格内更改 innerHTML

Question

我正在制作一个带有 table 的页面，其中每个 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>

如果单击 "complete" 按钮，我希望整个单元格的 innerHTML 更改，以便它只显示单词 "complete":

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/

为您创建 fiddle

你缺少的是event.stopPropagation();

它防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到事件通知。

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

您可以从 here

阅读更多关于事件传播的信息

从单元格内更改 innerHTML

Change innerHTML from within cell

html

javascript

innerhtml