如何将button元素的id值插入到td标签中作为内容显示

实现方案 #

你需要修改两处代码完成需求：给点击事件传入当前触发元素的引用，再在函数中读取id动态填充到td中。

修改HTML的点击事件绑定 #

给addRow传入this参数，代表当前被点击的元素：

<div id="1/8/2021" type="button" onclick="addRow(this)" style="width: 80px; height: 60px;"><span class="month">AUGUST</span>1</div>

修改JavaScript函数逻辑 #

接收传入的元素，读取其id属性后替换到模板字符串的td位置：

function addRow(clickedEl) {
  const btnId = clickedEl.id;
  document.querySelector("#content").insertAdjacentHTML(
    "afterbegin",
    `<tr>
        <td>${btnId}</td>
      </tr>`
  );
}

注意：请确保页面中已存在id为content的table/tbody容器，否则插入操作会报错。

内容的提问来源于stack exchange，提问作者magic bean