使用javascript将表中的所有标签作为目标

我有如下设置。在这里，我试图添加自定义收音机和复选框

Array.from（document.querySelectorAll（“tr”）.forEach（（tr，index）=>{
var mark=document.createElement（“span”）；
数组.from（tr.querySelectorAll（“输入”））.forEach（（inp，index1）=>{
if（输入类型==“无线电”）{
mark.classList.add（“dotmark”）；
inp.parentNode.appendChild（标记）；
}
否则{
标记.classList.add（“选中标记”）；
inp.parentNode.appendChild（mark）；//改为附加到下一个td的标签标记中
}
})
})

span{
宽度：20px；
高度：20px；
背景：#ccc；
显示：内联块；
}

例子
例子
例子

使用

而不仅仅是

inp.parentNode

Array.from（document.querySelectorAll（“tr”）.forEach（（tr，index）=>{
var mark=document.createElement（“span”）；
数组.from（tr.querySelectorAll（“输入”））.forEach（（inp，index1）=>{
if（输入类型==“无线电”）{
mark.classList.add（“dotmark”）；
inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（标记）；
}
否则{
标记.classList.add（“选中标记”）；
inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（标记）；
}
})
})

span{
宽度：20px；
高度：20px；
背景：#ccc；
显示：内联块；
}

例子
例子
例子

使用

而不仅仅是

inp.parentNode

Array.from（document.querySelectorAll（“tr”）.forEach（（tr，index）=>{
var mark=document.createElement（“span”）；
数组.from（tr.querySelectorAll（“输入”））.forEach（（inp，index1）=>{
if（输入类型==“无线电”）{
mark.classList.add（“dotmark”）；
inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（标记）；
}
否则{
标记.classList.add（“选中标记”）；
inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（标记）；
}
})
})

span{
宽度：20px；
高度：20px；
背景：#ccc；
显示：内联块；
}

例子
例子
例子

在众多方法中，有一种方法如下：

Array.from（document.querySelectorAll（“tr”）.forEach（（tr，index）=>{
var mark=document.createElement（“span”）；
数组.from（tr.querySelectorAll（“输入”））.forEach（（inp，index1）=>{
//缓存元素以提高可读性：
让label=inp.parentNode.nextElementSibling.querySelector（'label'）；
//根据三元运算符的结果添加类名，
//如果input.type等于“radio”，则返回
//“dotmark”，否则返回“checkmark”：
mark.classList.add（inp.type=='radio'？'dotmark'：'checkmark'）；
//追加保存在“mark”变量中的元素：
标签。附加子项（标记）；
})
})

span{
宽度：20px；
高度：20px；
背景：#ccc；
显示：内联块；
}
span.dotmark{
背景色：柠檬黄；
}
span.复选标记{
背景色：#f90；
}

例子
例子
例子
例子

在众多方法中，有一种方法如下：

Array.from（document.querySelectorAll（“tr”）.forEach（（tr，index）=>{
var mark=document.createElement（“span”）；
数组.from（tr.querySelectorAll（“输入”））.forEach（（inp，index1）=>{
//缓存元素以提高可读性：
让label=inp.parentNode.nextElementSibling.querySelector（'label'）；
//根据三元运算符的结果添加类名，
//如果input.type等于“radio”，则返回
//“dotmark”，否则返回“checkmark”：
mark.classList.add（inp.type=='radio'？'dotmark'：'checkmark'）；
//追加保存在“mark”变量中的元素：
标签。附加子项（标记）；
})
})

span{
宽度：20px；
高度：20px；
背景：#ccc；
显示：内联块；
}
span.dotmark{
背景色：柠檬黄；
}
span.复选标记{
背景色：#f90；
}

例子
例子
例子
例子

您不需要嵌套循环，一次在tr上，一次在输入上，因为每个tr内只有一个输入和标签，所以您可以将它们作为

tr input

组合到单个查询中。而且，您不需要使用

Array.from

，因为

querySelectorAll

返回已具有

forEach

函数的

NodeList

document.querySelectorAll('tr input').forEach(input => {
    const span = document.createElement('span')
    span.classList.add(input.type === 'radio' ? 'dotmark' : 'checkmark')
    input.parentNode.nextElementSibling.appendChild(span)
})

---

您不需要嵌套循环，一次在tr上，然后在输入上，因为每个tr中只有一个输入和标签，所以您可以将它们作为

tr input

组合到单个查询中。而且，您不需要使用

Array.from

，因为

querySelectorAll

返回已具有

forEach

函数的

NodeList

document.querySelectorAll('tr input').forEach(input => {
    const span = document.createElement('span')
    span.classList.add(input.type === 'radio' ? 'dotmark' : 'checkmark')
    input.parentNode.nextElementSibling.appendChild(span)
})

---

inp.parentNode

是

td

。也许可以尝试

inp.closest（'tr'）.querySelector（'label'）

。我希望span元素插入connexo注释后面的下一个td标签标记中：

inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（'mark'）

；您发布的脚本显示您似乎非常了解JavaScript，那么我是否遗漏了您问题中的某些内容？你需要什么帮助？另外，如果

输入

不是

type=radio

？@DavidThomas，谢谢，我尝试了“nextSibling”，但它不起作用，但nextSiblingElement起作用。

inp.parentNode

是

td

。也许可以尝试

inp.closest（'tr'）.querySelector（'label'）

。我希望span元素插入connexo注释后面的下一个td标签标记中：

inp.parentNode.nextElementSibling.querySelector（'label'）.appendChild（'mark'）

；您发布的脚本有误