logo
Tags down

shadow

How to create a table with a fixed <thead> without jQuery/ in vanilla JavaScript?


By : Zilvinas Badaras
Date : October 16 2020, 06:10 AM
To fix this issue I have found multiple ways to accomplish this so far, but none of them supports a thead with multiple table rows. I have tried the display: block with overflow: auto option but that also does not support multiple table rows with rowspam and colspam. This codepen https://codepen.io/ariona/pen/LNQxNK is exactly what I am looking for, but I have no idea how jQuery works and therefore I am unable to understand what is going on. Does anyone know if it is possible to accomplish this with vanilla JavaScript? , It does not require JS, only CSS
Add this to the thead selector:
code :
position sticky
top 0
background white


Share : facebook icon twitter icon

Fixed <thead> in <table>


By : user1646238
Date : March 29 2020, 07:55 AM
around this issue Try this post: jQuery Scrollable, Sortable, Filterable table
It looks like they've got what you need (which is a freezable, scrollable jquery table).

onscroll table thead fixed and apply tbody td width to thead th jquery


By : Keeratipong Ukachoke
Date : March 29 2020, 07:55 AM
wish help you to fix your issue If you want to run your for loop only once, then you need a global variable to check whether it's already triggered or not.. It looks like you are in the right path.. Below is my code:
code :
var first=0; //put it outside, so it will be a global variable
$(window).scroll(function(){
    if ($(this).scrollTop() > 740 )
    {
        //$(".fixed-div-attendance").append($header);
        if(first == 0){
            myLovelyForLoop();
            first = 1;
        }
        $('.table').find('thead ').addClass('fixed-div-attendance');
        //code
    }
    else {
        //$('.table thead tr th:first').css('width','auto');
           $('.table').find('thead ').removeClass('fixed-div-attendance');
    }
});
function myLovelyForLoop() {
    $('.table thead tr th').each(function(i){
        var thWidth=$(this).width();
        var tdWidth=$(".table").find("td:eq("+i+")").width();
        if (thWidth<tdWidth){
            if (i==0){
                $(this).width(tdWidth-50);
            }else{
                $(this).width(tdWidth);
            }
        }else{
            $(".table").find("td:eq("+i+")").width(thWidth);
        }
    });
}

Table with fixed thead


By : IbrahimS
Date : March 29 2020, 07:55 AM
will be helpful for those in need The problem come from the padding on the th and td
When you don't add padding, it's aligned, but it don't use all the space
code :
.customtable {
			width: 100%;
			font-family: "Times New Roman", Times, serif;
			font-size:0.9em;
			background-color: #efefef;
			table-layout:fixed;
			}
			
		.customtable thead{
			display:block;
			position:fixed;
			z-index:100;
			}

		.customtable tbody{
			display:block;
			position:absolute;
			margin-top:150px;
			}
			
		.customtable th{
			background-color:#333;
			color:#fff;
			text-align:left;	
			}
		.customtable td{
			background-color:#fff;
			text-align:left;
			}

		th.rotate {
		  height: 140px;
		}
		
		th.rotate > div {
			transform: 
				translate(-10px, 46px)
				rotate(-90deg);
			width: 30px;
		}

		.customtable th:nth-child(1), .customtable td:nth-child(1){width:20px; max-width:20px;}/*#*/
		.customtable th:nth-child(2), .customtable td:nth-child(2){width:50px; max-width:50px;}/*id*/
		.customtable th:nth-child(3), .customtable td:nth-child(3){width:250px; max-width:250px;}/*company*/
		.customtable th:nth-child(4), .customtable td:nth-child(4){width:80px; max-width:80px;}/*forename*/
		.customtable th:nth-child(5), .customtable td:nth-child(5){width:120px; max-width:120px;}/*surname*/
		.customtable th:nth-child(6), .customtable td:nth-child(6){width:200px; max-width:200px;}/*email*/
<table class="customtable">    
    <thead>
        <tr>
          <th class="rotate"><div>#</div></th>
          <th class="rotate"><div>ID</div></th>
          <th class="rotate"><div>COMPANY</div></th>
          <th class="rotate"><div>FORENAME</div></th>
          <th class="rotate"><div>SURNAME</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td style="color:#666; background:#efefef;">1</td>
          <td style="color:#666; background:#efefef;">56</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">David</td>
          <td style="color:#666; background:#efefef;">Rumplestiltskin The Third (Junior)</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">2</td>
          <td style="color:#666; background:#efefef;">75</td>
          <td style="color:#666; background:#efefef;">Very, Very Long Company Name</td>
          <td style="color:#666; background:#efefef;">Fred</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
        <tr>
          <td style="color:#666; background:#efefef;">3</td>
          <td style="color:#666; background:#efefef;">120</td>
          <td style="color:#666; background:#efefef;">Bogus Company</td>
          <td style="color:#666; background:#efefef;">Joe</td>
          <td style="color:#666; background:#efefef;">Bloggs</td>
        </tr>
    </tbody>
</table>

How to remove empty th and td from thead and tbody from the HTML table which has no id, Jquery or Javascript


By : user1553996
Date : March 29 2020, 07:55 AM
I wish this help you Try this: you can use parent div selector to find the table and then its header and td elements to check if these elements are empty and delete it
code :
$(function(){
  $("div.ui-datatable-tablewrapper table[role=grid] thead tr th").each(function(){
      var text = $(this).text();
      if(!text && !$(this).find('input').length)
     { 
       $(this).remove();
     }
  });

$("div.ui-datatable-tablewrapper table[role=grid] tbody tr td").each(function(){
      var text = $(this).text();
      if(!text && !$(this).find('input').length)
     { 
       $(this).remove();
     }
  });
});

(jQuery to Vanilla Javascript) fixed floating element


By : Venkatesh Kaliyamoor
Date : March 29 2020, 07:55 AM
This might help you I am not a big fan of jQuery because it can cause a bigger load time on the page load(even if it's small), so I refrain from using jQuery as much as possible. , Update your JS to attach a event on scroll
Related Posts Related Posts :
  • How can I use function chaining with dates in JavaScript?
  • What is the difference between "delete" and "Reflect.deleteProperty()"
  • How to get attributes of individual elements in jquery array
  • Why do I get different results with "=" vs. "===" in javascript with Conditional (Ternary) Operators
  • I am trying to hold value of document.getElementById("image").src=UserInput +".gif"
  • Array being pushed into another array isn't displaying
  • Is there a React.js NPM module or any other solution for image/object mutli-selection?
  • 80% Javascript Solution for Flags in Codility
  • I want to display background while scrolling down
  • RegEx for matching text between two tags
  • Does having a lot of inner 'helper' functions inside a functional stateless react component will result in worse perform
  • How to submit a form through a button outside the form?
  • ESLint: Use callback in setState when referencing the previous state
  • How to parse state from one component to another in my example?
  • Visible Html select option showing under hidden items
  • Create SVG circle using path with 6 segments
  • Getting error while reading from a text file
  • Read a value from JSON Array without entity
  • Checkbox check or uncheck value null
  • Displaying multiple slider values to users
  • Am doing the destructing right?
  • VueJS data-bind object styling not working
  • Combine array and object destructuring
  • Execution skips promise statements
  • sort an array of objects leaving first field
  • how to highlight table cells in a certain way when hover over
  • Problems when using Chosen Selectors in external helper functions
  • Need to merge two objects together that each have an array to the matching IDs
  • How to get previous 6 months date from current date in javascript
  • how to get object value only without mentioning key from array list using ngFor in angular 7
  • Plugging into on_page_change events in testcafe
  • WithStore: Cannot read property 'state' of undefined (pure-react-carousel)
  • fullcalendar event info in modal popup
  • How do i reduce time complexity of this code
  • Deep comparing object props in React not working as expected
  • JavaScript method to remove case insensitive duplicates from string/Numbers
  • When to use parentheses after function name call (es6)
  • Convert list of Objects when the levels are given in an array
  • template variable always undefined ngOnChanges
  • RegEx for matching the first word
  • Render different au-target-id in aurelia repeat
  • Why does the function start before the button is pressed?
  • where can I vote for changes to javascript?
  • Change the digit format pagination in the slider
  • Hover/focus state activated initially on page load
  • Why do my normal sync codelines, works like async?
  • How to prevent or disable Bootstrap 4 popover auto positioning behavior (Self adjusting behavior)
  • What is the meaning of ({})?
  • How do I make a link to a property if the property is yet to be declared? (In a Class)
  • Getting Promise as return value inside FlatList React-native
  • Why can't you access JSON directly from the response in Fetch API?
  • How to grab value out of this nested array
  • function is not returning any value
  • "Cannot read property 'map' of undefined (React.js)"
  • How do I extract the contents of a specific json within the html?
  • How do I assign a src attribute to the background-image of another element?
  • How to access a public method from a wrapped Component using TypeScript?
  • Errors while looping through the objects
  • How to fix "TypeError: fsevents is not a constructor" react error
  • Invalid JSON characters after processing JSON file in Vue.js
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk