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

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

javascript html

Javascript 尝试将html元素移动到表中的特定位置,javascript,html,Javascript,Html,我正在尝试将HTML元素移动到表中的特定位置。例如，我有一个标记为“abcd”的禁用按钮和一个单元格值为“xyz”的表。我想通过引用值“xyz”来移动单元格顶部的按钮“abcd” 到目前为止，javascript函数的代码如下所示： <script type="text/javascript"> function moveObject() { var label = prompt("Please enter object to move", "");

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

到目前为止，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>


函数moveObject（）{
var label=提示（“请输入要移动的对象”，”）；
var location=提示（“请输入单元格位置”）；
var元素=document.getElementById（标签）；
}

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

假设html表具有以下结构：

 <table id="myTable">
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
    <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

变量cells包含myTable的所有TD元素的html集合，但我们真正感兴趣的是单元格的实际内容-因此我们需要循环此数组，并使用.firstChild.data引用每个单元格内容。如果我们将其与字符串进行比较，我们可以看到哪个单元格匹配

下面是一个例子：

函数getCell（myString）{ var cells=document.getElementById（“myTable”）.getElementsByTagName（“td”）；对于（var a=0；a


细胞A
B单元
细胞C
D单元

要获得预期结果，请使用下面的选项，使用

document.getElementsByTagName

和

prepend

将按钮添加到单元格值中

使用

document.getElementsByTagName（'TD'）获取所有tds

使用for of循环所有td元素

查找文本xyz和前置按钮已禁用的单元格-abcd

函数moveObject（）{
设tds=document.getElementsByTagName（'TD'）
设btn=document.getElementById（'abcd'）
for（tds的let单元）{
if（cell.innerHTML==='xyz'）{
单元格预结束（btn）
}
}
}

表tr td{
边框：1px纯黑；
}


测验
xyz
abcd
Move

提示符（）

是一个糟糕的界面。改为这样做：

将所有内容包装在块级元素中（
```
div
```
，
```
section
```
，
```
main
```
，等等），我们将其称为“父元素”
通过“按事件”属性将父项注册到单击事件：
```
parent.onclick = callback
```
或按事件侦听器：
```
parent.addEventListener('click', callback) 
```
现在，父对象将检测父对象中任何对象的所有单击
使用
```
event.target
```
确定单击的内容。标识
```
事件.target
```
不需要id、类或标记名，但在if/else控件中使用
```
.matches（）
```
可缩小
```
事件.target
```

功能添加按钮（事件）{
const clicked=event.target；
const buttons=this.queryselectoral（'button'）；
const prompt=this.querySelector（“图例”）；
如果（单击。匹配（'按钮'））{
如果（单击了.matches（'.selected'））{
单击.classList.remove（'selected'）；
prompt.textContent='单击按钮'；
prompt.style.color='black'；
}否则{
用于（让按钮中的按钮）{
按钮.classList.remove（'selected'）；
}
单击.classList.add（'selected'）；
prompt.textContent='单击单元格'；
prompt.style.color='red'；
}
}else if（单击.matches（'td'））{
let button=this.querySelector（'.selected'）；
如果（按钮）{
单击。追加子项（按钮）；
}否则{
返回false；
}
}否则{
返回false；
}
}
document.querySelector（'main'）。onclick=addButton
表格{
表布局：固定；
边界间距：3倍；
宽度：100%；
}
th，
运输署{
宽度：33%；
边框：1px实心#000；
填充：1px
}
th：：之前，
td：：之前{
内容：'\a0'；
}
传奇{
字号：1.75rem
}
钮扣{
显示：内联块；
利润率：0.5px；
线高：100%；
}
.选定{
颜色：红色；
外形：2倍纯红；
}

基础知识
点击按钮
X
X
X
X
此外，请将所有新信息放在您的问题中，不要放在下面。谢谢。有没有不使用innerHTML复制的方法？您可以使用cell.textContent而不是cell.innerHTML
parent.addEventListener('click', callback)