Focus on selecting each label within a table using JavaScript

Question

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes.

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>

I would like the dynamically created span element to be inserted into the label tag instead of within the input's td.

Note: The class of the span element depends on the input type.

javascript html css dom-traversal

Answer 1

Answer №1

One recommended method involves the following steps:

Array.from(document.querySelectorAll("tr")).forEach((tr, index) => {
  var mark = document.createElement("span");
  Array.from(tr.querySelectorAll("input")).forEach((inp, index1) => {

    // Storing the <label> element for better readability:
    let label = inp.parentNode.nextElementSibling.querySelector('label');

    // Adding a specific class based on the input type:
    mark.classList.add(inp.type === 'radio' ? 'dotmark' : 'checkmark');

    // Appending the created element to the label section:
    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>

Additionally, an important point raised by the OP in response to the question:

I attempted using nextSibling with no success, but nextElementSibling worked effectively.

The key disparity between the two methods is that while nextSibling includes any sibling regardless of its type, nextElementSibling specifically targets the next sibling which is also an element.

For more information, please refer to the following resources:

NonDocumentTypeChildNode.nextElementSibling

.

Answer 2

One recommended method involves the following steps:

Array.from(document.querySelectorAll("tr")).forEach((tr, index) => {
  var mark = document.createElement("span");
  Array.from(tr.querySelectorAll("input")).forEach((inp, index1) => {

    // Storing the <label> element for better readability:
    let label = inp.parentNode.nextElementSibling.querySelector('label');

    // Adding a specific class based on the input type:
    mark.classList.add(inp.type === 'radio' ? 'dotmark' : 'checkmark');

    // Appending the created element to the label section:
    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>

Additionally, an important point raised by the OP in response to the question:

I attempted using nextSibling with no success, but nextElementSibling worked effectively.

The key disparity between the two methods is that while nextSibling includes any sibling regardless of its type, nextElementSibling specifically targets the next sibling which is also an element.

For more information, please refer to the following resources:

NonDocumentTypeChildNode.nextElementSibling

.

Answer 3

Answer №2

Utilize

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

instead of simply using

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 4

Utilize

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

instead of simply using

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 5

Answer №3

A more efficient way to handle this situation is by eliminating the need for nested loops. Since there is only one input and label inside each tr element, you can streamline the process by combining them into a single query using tr input. Additionally, there is no requirement to utilize Array.from as querySelectorAll already returns a NodeList with a built-in forEach function.

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

Answer 6

A more efficient way to handle this situation is by eliminating the need for nested loops. Since there is only one input and label inside each tr element, you can streamline the process by combining them into a single query using tr input. Additionally, there is no requirement to utilize Array.from as querySelectorAll already returns a NodeList with a built-in forEach function.

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

Focus on selecting each label within a table using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Obtaining a string value through a promise retrieval

The Google Visualization chart fails to display properly once CSS is applied

Parent div is positioned absolutely with overflow set to hidden

Utilizing Vue and Vuex to execute Axios operations within a store module

Multer is successfully retrieving images, but unfortunately, it is failing to save the files in the intended directory

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Integrating Watson Conversation with Oracle Database

Tips for updating the background color of a dropdown menu in the navigation bar

Get rid of the paper border in Material-ui

Using JSP to send variables from an external Javascript file

Transferring account information to a function call in the near-js-api

I rely on the handleChange function to update the state value, but unfortunately, it remains unchanged

Updating the state on a click event triggered by a MenuItem in React using Material UI

ways to set a background color for a textarea element using bootstrap

Having trouble getting the npm package with @emotion/react and vite to function properly

Error: Unable to locate module '@material/core/Grid'

"Interact with JSON data using AngularJS and JavaScript by clicking a button to edit

Do you think it's achievable to modify the color using CSS's order attribute?

Showing items in a VueJS component and transferring them to the component