我如何 return 相对 HTML table 值？

Question

我有一个 HTML table 按钮在第四列。我希望能够按下每个按钮并让它 return 第二列中的值，但在同一行。

我使用以下代码创建 table：

function loadTableData() {
    for (i=0; i < 7; i++) {
        let row = table.insertRow();
        let scale = row.insertCell(0);
        let note = row.insertCell(1);
        let chord = row.insertCell(2);
        let play = row.insertCell(3);
        scale.innerHTML = degChoice[i]
        note.innerHTML = finalArray[i];
        chord.innerHTML = chordChoice[i];
        play.innerHTML = '<button onclick="playAudio()">Play Chord</button>'
    }
}

table 值是根据其他标准生成的（这部分工作正常）。

这是我用来尝试调用行中第二个单元格的值的代码：

function playAudio(){
    var firstCell = this.parentNode.parentNode.childNodes[1].nodeValue;
    alert(firstCell);
}

无论我怎么尝试，我都无法 return 第二个单元格值。有人对此有什么建议吗？

Answer 1

您分配的事件处理程序有误。通常你应该避免使用on...属性，但是如果你这样做，你需要注意this是如何赋值的。

它在 onclick 内部定义，但不在您的函数 playAudio 内部定义，因此您需要将其传递给：

play.innerHTML = '<button onclick="playAudio(this)">Play Chord</button>'

function playAudio(button){
  var firstCell = button.parentNode.parentNode.childNodes[1].nodeValue;
  alert(firstCell);
}

但是，如果您直接将其指定为事件处理程序，则可以在 playAudio 中使用 this，但是您需要将按钮创建为 DOM 元素：

const button = document.createElement("button");
button.textContent = "Play Chord"; // Use textContent instead of innerHtml when assigning plain text
button.addEventListener("click", playAudio); // or: button.onclick = playAudio;
play.appendChild(button);

现在您可以在 playAudio 中使用 this。或者，更好地访问事件对象作为 playAudio:

中的第一个参数

function playAudio(event){
  var button = event.target; // or: var button = this;
  var firstCell = button.parentNode.parentNode.childNodes[1].nodeValue;
  alert(firstCell);
}

事件介绍：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

我如何 return 相对 HTML table 值？

How do I return a relative HTML table value?

html

javascript

parent-child