javascript - 尝试将 html 元素移动到表中的特定位置

Question

我正在尝试将 HTML 元素移动到表中的特定位置。例如，我有一个标记为“abcd”的禁用按钮和一个单元格值为“xyz”的表格。我想通过引用该值将按钮“abcd”移动到具有值“xyz”的单元格顶部。

到目前为止，我的 javascript 函数代码如下所示:

<script type="text/javascript">
    function moveObject() {
        var label = prompt("Please enter object to move", "");
        var location = prompt("Please enter cell location", "");
        var element = document.getElementById(label);
    }
</script>

如何引用单元格值以便让对象移动到那里？

Answer 1

要达到预期结果，请使用以下选项，使用 document.getElementsByTagName 和 prepend 将按钮添加到单元格值

1. 使用 document.getElementsByTagName('TD') 获取所有 td
2. 使用 for of 循环所有 td 元素
3. 查找包含文本 xyz 并添加禁用按钮 - abcd 的单元格

function moveObject() {
        let tds = document.getElementsByTagName('TD')
    let btn = document.getElementById('abcd')
        for(let cell of tds){
      if(cell.innerHTML ==='xyz'){
        cell.prepend(btn)
      }
    }
        }

table tr td{
  border: 1px solid black;
}

<table>
  <tr>
    <td>test</td>
    <td>xyz</td>
  </tr>
</table>
<button  id="abcd" disabled>abcd</button>
<button onclick="moveObject()">Move</button>