Question

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

Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{
  var mark=document.createElement("span");
  Array.from(tr.querySelectorAll("input")).forEach((inp,index1)=>{
    if(inp.type=="radio"){
      mark.classList.add("dotmark");
      inp.parentNode.appendChild(mark);
    }
    else{
      mark.classList.add("checkmark");
      inp.parentNode.appendChild(mark);//instead append in to the next td's label tag
    }
  })
})

span{
width:20px;
height:20px;
background:#ccc;
display:inline-block;
}

<table id="tab1" class="table labelCustom">
   <tbody>
        <tr><td><input type='radio' id='one' name='name'></td><td><label for='one'>example</label></td></tr>
        <tr><td><input type='radio' id='two' name='name'></td><td><label for='two'>example</label></td></tr>
        <tr><td><input type='radio' id='three' name='name'></td><td><label for='three'>example</label></td></tr>
   </tbody>
</table>

我希望将动态创建的span元素插入到label标签中。现在将其插入输入td中。

注意：span元素的类取决于输入类型。

Answer 1

使用

inp.parentNode.nextElementSibling.querySelector('label')

而不是

inp.parentNode

Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{
  var mark=document.createElement("span");
  Array.from(tr.querySelectorAll("input")).forEach((inp,index1)=>{
    if(inp.type=="radio"){
      mark.classList.add("dotmark");
      inp.parentNode.nextElementSibling.querySelector('label').appendChild(mark);
    }
    else{
      mark.classList.add("checkmark");
      inp.parentNode.nextElementSibling.querySelector('label').appendChild(mark);
    }
  })
})

span{
width:20px;
height:20px;
background:#ccc;
display:inline-block;
}

<table id="tab1" class="table labelCustom">
   <tbody>
        <tr><td><input type='radio' id='one' name='name'></td><td><label for='one'>example</label></td></tr>
        <tr><td><input type='radio' id='two' name='name'></td><td><label for='two'>example</label></td></tr>
        <tr><td><input type='radio' id='three' name='name'></td><td><label for='three'>example</label></td></tr>
   </tbody>
</table>

Answer 2

以下是一种方法：

Array.from(document.querySelectorAll("tr")).forEach((tr, index) => {
  var mark = document.createElement("span");
  Array.from(tr.querySelectorAll("input")).forEach((inp, index1) => {

    // caching the <label> element for readability:
    let label = inp.parentNode.nextElementSibling.querySelector('label');

    // adding the class-name based on the result of the ternary operator,
    // if the input.type is equal to 'radio' we return the class-name of
    // 'dotmark', otherwise we return 'checkmark':
    mark.classList.add(inp.type === 'radio' ? 'dotmark' : 'checkmark');

    // appending the element held within the 'mark' variable:
    label.appendChild(mark);
  })
})

span {
  width: 20px;
  height: 20px;
  background: #ccc;
  display: inline-block;
}

span.dotmark {
  background-color: limegreen;
}

span.checkmark {
  background-color: #f90;
}

<table id="tab1" class="table labelCustom">
  <tbody>
    <tr>
      <td><input type='radio' id='one' name='name'></td>
      <td><label for='one'>example</label></td>
    </tr>
    <tr>
      <td><input type='radio' id='two' name='name'></td>
      <td><label for='two'>example</label></td>
    </tr>
    <tr>
      <td><input type='radio' id='three' name='name'></td>
      <td><label for='three'>example</label></td>
    </tr>
    <tr>
      <td><input type='checkbox' id='four' name='differentName'></td>
      <td><label for='four'>example</label></td>
    </tr>
  </tbody>
</table>

作为附录，从操作员的评论到问题：

我尝试了nextSibling，但没有成功，但是nextSiblingElement起作用了。

两者之间的区别在于nextSibling返回任何同级节点，无论是文本节点，元素节点还是其他节点，而nextElementSibling顾名思义，返回下一个同级节点也是一个元素节点。

参考文献：

Answer 3

您不需要嵌套循环，一次在tr上然后在输入上，因为每个tr内只有一个输入和标签，因此可以将它们组合为tr input到单个查询中。而且，您不需要使用Array.from，因为querySelectorAll返回了NodeList，而该forEach已经具有document.querySelectorAll('tr input').forEach(input => { const span = document.createElement('span') span.classList.add(input.type === 'radio' ? 'dotmark' : 'checkmark') input.parentNode.nextElementSibling.appendChild(span) })函数。

select 'INSERT INTO public."HoldingMasters"(
    "AccountID", "AssetID", "CreatedDate", "DateAcquired", "GainsLongTerm", "LotNumber", "Managed", "ModifiedDate", "Sweep", "UID", "Units", "UnitsPledged", "IsModified", "ModifiedCount")
    SELECT ' + CAST("AccountID" as integer) + ',' + CAST("AssetID" as integer) + ',' + "CreatedDate" + ',' + "DateAcquired" + ',' + "GainsLongTerm" + ',' + CAST("LotNumber" as integer) + ',' + "Managed" + ',' + "ModifedDate" + ',' + "Sweep" + ',' + CAST("UID" as integer) + ',' + "Units" + ',' + ',' + "UnitsPledged" + ',' + "IsModifed" + ',' + CAST("ModifiedCount" as integer) +
    'WHERE NOT EXISTS(SELECT "UID" from "HoldingMasters" where "UID" = ' + CAST("UID" as integer) +')'
    as script from "HoldingMasters";

使用javascript定位表格中的所有标签

3 个答案: