當我單擊 td 標簽（javascript + html）時，我無法將輸入標簽添加到 td 標簽中

Question

我有一個帶有標簽table ， tr ， th ， td的經典表格，當我單擊表格中的單元格（ <td>標簽）時，我希望 js 將輸入標簽添加到td標簽中。 在這里你可以看到我的代碼，我不明白哪里出錯了：

var td = document.getElementsByTagName('td');
for (var i = 0; i < td.length; i++) {
  td[i].addEventListener('click', function () {
//    alert('i am working');
    var input=document.createElement('input');
    input.setAttribute('type','text');
    console.log(input);
    document.body.td[i].appendChild(input);
    console.log(td[i]);

Answer 1

替換document.body.td[i].appendChild(input); 用this.appendChild(input);

 var td = document.getElementsByTagName('td'); for (var i = 0; i < td.length; i++) { td[i].addEventListener('click', function() { var input = document.createElement('input'); input.setAttribute('type', 'text'); this.appendChild(input); }) }

 td { border: 1px solid red; }

 <table> <tr> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <table>