更改單元格內的innerHTML

我正在製作一個頁面，其中每個td都可以通過單擊進行編輯。更改單元格內的innerHTML

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

如果「完成」按鈕被點擊我想的innerHTML的的整個單元改變，以便它只是說「完成」一詞：

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？

來源

2016-05-24 Tommy Gaboreau

事件傳播，您可以創建一個相同小提琴？ –

我從來沒有做過之前，但我會嘗試:) –

檢查我的答案低於 –

必須在創建搗鼓你：https://jsfiddle.net/szn21qcx/

你所缺少的是event.stopPropagation();

它會阻止事件冒泡DOM樹，阻止任何父處理程序被通知的事件。

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

你可以閱讀更多關於here

來源

2016-05-24 09:46:11

是的！謝謝！ :) –

完成。對不起，自從我在這裏發佈以來已經有一段時間了。感謝您的幫助。 –

更改單元格內的innerHTML

回答

相關問題