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

How to vertically center content within a container-fluid in Bootstrap 4

How can I add a comma after every third number in a react component?

Utilizing Selenium to Extract Data from ESPN Website

Is it possible to constantly retrieve data at one-second intervals in NextJS using getServerSideProps?

Uploading large files on Vuejs causes the browser to crash

Differences between utilizing computed variables versus useState and useEffect

Activate when every single pixel within an element is see-through

Combine two redux actions and access the modified state in the second action

Serialization of JSON is not possible for the data type <code>[object Promise]</code>

Issues with Angular-Trix compatibility with Internet Explorer 10

Every time I attempt to input text into the text area, the page automatically refreshes, preventing me from completing any entries

Interested in extracting an HTML table from a Form element within a Python Flask application?

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

Tips for displaying videos with sound when the autoplay has been successfully implemented, but the audio is not working

Ways to track all requests completed in Nuxt 3

Analyzing and inserting elements into an array of objects

Guide to placing the cursor at a specified position within an editable content div

The CSS styling of Vuetify TreeView does not support text wrapping

The correct method for concealing components from unauthorized users in Vue