Таргетинг на все метки внутри таблицы с использованием JavaScript - PullRequest
Новая
       31

Таргетинг на все метки внутри таблицы с использованием JavaScript

0 голосов
/ 10 сентября 2018

У меня есть следующие настройки. здесь я пытаюсь добавить пользовательское радио и флажки. 

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. сейчас он вставляет его во входы тд.

Примечание: класс элемента span зависит от типа ввода.

Ответы [ 3 ]

0 голосов
/ 10 сентября 2018

Один из многих подходов следующий: 

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, как следует из названия, возвращает следующего брата, который также является элементом -node.

Ссылки:

0 голосов
/ 10 сентября 2018

Вам не нужны вложенные циклы, один раз для 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)
})
0 голосов
/ 10 сентября 2018

Использование 

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>
...