Ways to generate multiple elements using JavaScript

Question

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style?

This is what my JavaScript code currently looks like:

var styles =`
 // CSS styles for freezing first two columns in a table
`;
// Dynamically create and append a <style> element with the specified styles
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Instead of manually adding nth-child every time, is it possible to automate this process with a JavaScript function?

javascript html css dom

Answer 1

Answer №1

Organize your data values into an array:

const styles = 
` table:first-of-type thead tr th:first-child{
    position: sticky;
    position: -webkit-sticky;
 background-color:white;
color:crimson;
      left: 0px;
   z-index: 3;
  
}

table:first-of-type tbody tr td:first-child{
    position: sticky;
    position: -webkit-sticky;
    background: crimson;

    left: 0px;
color:black;
   z-index: 1;
  
  
}`

 + [30, 138].map((leftValue, index) => 

`
table:first-of-type thead tr th:nth-child(${index+2}){
    position: sticky;
    position: -webkit-sticky;
    color: black;
          left: 30px;
      z-index: 3;
}

table:first-of-type tbody tr td:nth-child(${index+2}){
    position: sticky;
    position: -webkit-sticky;
    background: black;
      left: ${leftValue}px;    
   z-index: 1;
}
`);

$('pre').text(styles);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre></pre>

Answer 2

Organize your data values into an array:

const styles = 
` table:first-of-type thead tr th:first-child{
    position: sticky;
    position: -webkit-sticky;
 background-color:white;
color:crimson;
      left: 0px;
   z-index: 3;
  
}

table:first-of-type tbody tr td:first-child{
    position: sticky;
    position: -webkit-sticky;
    background: crimson;

    left: 0px;
color:black;
   z-index: 1;
  
  
}`

 + [30, 138].map((leftValue, index) => 

`
table:first-of-type thead tr th:nth-child(${index+2}){
    position: sticky;
    position: -webkit-sticky;
    color: black;
          left: 30px;
      z-index: 3;
}

table:first-of-type tbody tr td:nth-child(${index+2}){
    position: sticky;
    position: -webkit-sticky;
    background: black;
      left: ${leftValue}px;    
   z-index: 1;
}
`);

$('pre').text(styles);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre></pre>

Ways to generate multiple elements using JavaScript

Answer №1

Similar questions

Switch button for updating text, icon, and displaying search bar

Tips for displaying dynamic content in VueJS?

My API is feeding data to the Material UI CardMedia image

Unlocking the intricacies of navigating through nested arrays of objects in JavaScript

Angular has the ability to round numbers to the nearest integer using a pipe

Tips for accessing the names of subdirectories and files on a website

After using promise.all, I successfully obtained an array of links. Now, how do I calculate the total number of links in the array?

Prevent background image animation in CSS

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Optimizing JavaScript performance by packaging files with Browserify

Can the image upload file size be customized or adjusted?

Transform HTML into PNG with Canvas2image, followed by the conversion of PNG into BMP

Updating JQuery function after window is resized

Transmit data to a modal using JSX mapping technique

The button is positioned at the bottom right within a div surrounded by text that flows around it seamlessly

How about mixing up your backgrounds with an overlay effect for a unique look?

In Angular, you can easily modify and refresh an array item that is sourced from a JSON file by following these steps

How can we enhance the efficiency of rendering text on the screen?

Stop the div from expanding because of oversize text in Bootstrap

Update the input type on the fly