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

jQuery form validation issue, unresponsive behavior

Using axios to pass parameters in a URL with the GET method on a localhost server

What is the best way to adjust the height of the border on the left

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

AngularJS provides a way to create opening pages with clickable buttons for a

Tips on selecting specific data from a nested JSON array based on conditions and fetching just one value from the initial filtered result with Javascript (designed for Google Sheets)

What is the best way to display time instead of angles in highcharts?

Tips for consolidating outputs from three different APIs using JavaScript and AJAX? [Pseudo code example]

Fixed Positioning Div to Stay at the Top while Scrolling

What causes an object to declare itself as undefined only in the event that I attempt to access one of its properties?

Pass data back and forth between app.js (node) and javascript (main.js)

Leverage PHP to integrate JSON data for consumption by JavaScript

Tips for sending the ampersand character (&) as a parameter in an AngularJS resource

Is there a way to save a base64 image to an excel file?

Determine whether to show or hide a div based on the width of the

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Adjusting solely the depicted data sets in the Highcharts.js library

Steps for creating a JavaScript session expiry notification:

Make an element in jQuery draggable but always within the viewport

The challenge of transferring documents to the server