セル内からinnerHTMLを変更してください

Question

私はそれぞれのtdをクリックして編集できるテーブルを持つページを作っています。

各TDのonclickのは、JS、次の関数である： "完全" ボタンを私はinnerHTMLプロパティを望むクリックされた場合

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

：

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が、このように見える終わります

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

しかし、これは実行します。それだけで単語が「完了」と言うように変更するための全細胞のうまく動作しません。何もTDとボタンのタグがピンクの輝き、私はChromeでの要素を見てるとき以外は起こりません：

しかし、

ボタンが表示されますので、私は、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