scrolling horizontally with fixed left div - javascript

I'm looking for a way to scroll horizontally in a div view, with on the left a sidebar that is fixed. So when there is scrolling (horizontal), everything disappears behind this sidebar.
To illustrate:
I do not know how this can be done precisely. Can this only through CSS or do it in conjunction with Javascript? And if so, how exactly?
Here's [my working fiddle so far]
ssss(http://jsfiddle.net/justamir/fp2xgqL5/)


If you are using a table, to make it scrollable you place it within a div with overflow. If you want a fix column, this must be placed outside the overflowed div. You end up with a layout like this:
.scrollable {
width: 100px;
overflow: auto;
}
.fixed,
.scrollable {
float: left;
}
<table class="fixed">
<tr>
<th>FIXED</th>
</tr>
<tr>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
</tr>
</table>
<div class="scrollable">
<table>
<tr>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
</tr>
<tr>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
</tr>
</table>
</div>

Related

datatables.net Unable to sort footer selection month name wise

Sorry I am new here and don't know how to ask queries.
I have a salary table. there is a column by which users can see the data of employees in month wise. I have used the example in https://www.datatables.net/examples/api/multi_filter_select.html. But in the footer portion, it is showing the month name in alphabetical order, but I want it in January, February..... December.
I have uploaded the test cases here. Please check
http://live.datatables.net/rowufiru/1/
the output image is
My HTML code is
<table id="example1" class="display table table-bordered">
<thead>
<th>Name</th>
<th data-field="start_date" data-sortable="true" data-footer-formatter="amountFormatter">Month</th>
<th>Year</th>
<th>Total salary</th>
</thead>
<tbody id="employee_data">
<tr>
<td>Akash</td>
<td>December</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>March</td>
<td>2020</td>
<td>600</td>
</tr>
<tr>
<td>Akash</td>
<td>January</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>April</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>May</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Akash</td>
<td>February</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>January</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Akash</td>
<td>October</td>
<td>2020</td>
<td>500</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Month</th>
<th>Year</th>
<th>Total salary</th>
<th></th>
</tr>
</tfoot>
</table>

How to detect exact offset top() using jquery after scroll?

I have a table i want to detect offset top of TR where is clicked this is working fine but after scroll page this is not working fine. Why after scroll offset().top is changed? How can fix it?
$(function() {
$('tr').click(function() {
offsetTop = $(this).offset().top;
console.log(offsetTop);
});
});
.myDiv {
overflow-y: auto;
height: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="myDiv">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 1</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 2</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 3</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 4</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 5</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 6</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 7</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 8</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 9</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 10</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

You could always calculate the offset, factoring in the scroll position:
var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();

set div full height and width in click from another div

I am loading an html file into a content div based on a click from a menu bar. The HTML contains 5 tables but for some reason the div only shows the first 5 lines of the first table, then you need a scroll bar to view the rest of the tables. I want to see all the tables on a single view and only have the scroll bars if the information exceeds the screen. Any suggestions would help. I have tried to set the width and height to 100% on the div but that did not work. When I view the table HTML alone it looks the way I want it to.
Thanks for any and all help.
function load_codes() {
document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}
function load_mrgsql() {
document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Open Merge Analysis WorkBook</p>
<p>
Open Merge Analysis SQL file
</p>
<p>
Common Merge Code List
</p>
<p>Merge Analysis Statistics</p>
<p>My Statistics</p>
</div>
<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
<h1>Merge Analysis Tracking</h1>
<p>Welcome to the Merge Analysis Tracking Tool</p>
<p>Look around</p>
</div>
<!-- HTML with Tables (only 2 shown) -->
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Case Close Codes</th>
</tr>
</thead>
<tr>
<td>BFU</td>
<td>BIOLOGICAL FATHER UNKNOWN</td>
</tr>
<tr>
<td>DGC</td>
<td>IV-D GOOD CAUSE</td>
</tr>
<tr>
<td>DNO</td>
<td>NCP DECEASED</td>
</tr>
<tr>
<td>ERR</td>
<td>CASE ENTERED IN ERROR</td>
</tr>
<tr>
<td>FOR</td>
<td>FOREIGN</td>
</tr>
<tr>
<td>INC</td>
<td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
</tr>
<tr>
<td>JNC</td>
<td>INITIATING JURISDICTION NON COOPERATION</td>
</tr>
<tr>
<td>LCO</td>
<td>LOCATE ONLY</td>
</tr>
<tr>
<td>LOC</td>
<td>LOSS OF CONTACT</td>
</tr>
<tr>
<td>NCA</td>
<td>NO CURRENT ORDER/ARREARS
<$500</td>
</tr>
<tr>
<td>NCO</td>
<td>NON-COOPERATION</td>
</tr>
<tr>
<td>P21</td>
<td>PATERNITY 21</td>
</tr>
<tr>
<td>PBI</td>
<td>PATERNITY BEST INTEREST</td>
</tr>
<tr>
<td>PEX</td>
<td>PATERNITY EXCLUDED</td>
</tr>
<tr>
<td>QLO</td>
<td>QUICK LOCATE ONLY</td>
</tr>
<tr>
<td>RSC</td>
<td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
</tr>
<tr>
<td>UL1</td>
<td>UNABLE TO LOCATE 1 YEAR</td>
</tr>
<tr>
<td>UL3</td>
<td>UNABLE TO LOCATE 3 YEARS</td>
</tr>
</table>
<table class="-table">
<thead>
<tr>
<th colspan="4">Relationship Codes</th>
</tr>
</thead>
<tr>
<td>01</td>
<td>SELF</td>
</tr>
<tr>
<td>02</td>
<td>SPOUSE</td>
</tr>
<tr>
<td>05</td>
<td>CHILD</td>
</tr>
<tr>
<td>06</td>
<td>GRANDCHILD</td>
</tr>
<tr>
<td>07</td>
<td>NEPHEW OR NIECE</td>
</tr>
<tr>
<td>08</td>
<td>SIBLING</td>
</tr>
<tr>
<td>09</td>
<td>FIRST OR SECOND COUSIN</td>
</tr>
<tr>
<td>10</td>
<td>OTHER RELATIVE</td>
</tr>
<tr>
<td>13</td>
<td>UNBORN</td>
</tr>
<tr>
<td>15</td>
<td>STEP CHILD</td>
</tr>
<tr>
<td>16</td>
<td>STEP GRANDCHILD</td>
</tr>
<tr>
<td>17</td>
<td>STEP NEPHEW OR NIECE</td>
</tr>
<tr>
<td>18</td>
<td>STEP BROTHER OR SISTER</td>
</tr>
<tr>
<td>19</td>
<td>OTHER SPECIFIED RELATIVE</td>
</tr>
<tr>
<td>20</td>
<td>ATTORNEY</td>
</tr>
<tr>
<td>27</td>
<td>OTHER</td>
</tr>
<tr>
<td>28</td>
<td>FATHER</td>
</tr>
<tr>
<td>29</td>
<td>ALLEGED FATHER</td>
</tr>
<tr>
<td>30</td>
<td>STEP FATHER</td>
</tr>
<tr>
<td>31</td>
<td>GRAND FATHER</td>
</tr>
<tr>
<td>32</td>
<td>MOTHER</td>
</tr>
<tr>
<td>33</td>
<td>STEP MOTHER</td>
</tr>
<tr>
<td>34</td>
<td>GRAND MOTHER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
</table>

If I understand your question correctly, you want to make the object have it's full height and not display scrollbars, instead of the other way around.
If so, you should be able to do something like this:
function load_codes() {
let elem = document.getElementById("content")
elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
elem.onload = function(e) {
elem.style.height = e.contentWindow.document.body.offsetHeight;
}
}
That should get what you need. You may need to do additional css to remove the object's borders.

My slider refuses to slide, it just vanishes

Here's my problem: I have an image slider that's refusing to actually slide. I've spent the last two hours browsing answers here, and looking at JSFiddles. Nothing seems to be of any help.
This is my problem: I have an HTML table contained within a div, with given properties below. When the button at the top is clicked, the slider (the div with id "slider") is supposed to toggle via a slide animation. But instead, it appears or disappears without an animation!
I've made sure it has a height and width, and everything else that various answers said it needs (though if I didn't have to define a height and width in px, thus letting it expand or contract to however large or small it needs to be, would be great). But yet there's no animation! It just disappears!
Please help!
Also, most of the HTML is the table which you can ignore. Just the beginning and end are important.
<h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2>
<br>
<button id="toggleSwitch" onClick="toggleFlipFlop();">Click here to show table</button>
<!--table for Friday events-->
<div id = "slider" class="hidden">
<table id="friday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR FRIDAY, MARCH 31</strong></th>
</tr>
<tr>
<td>3:45 - 5:00</td>
<td>CONVENTION REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 5:15</td>
<td>GRAPHIC ARTS REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 4:50</td>
<td>CANDIDATES MEETING</td>
</tr>
<tr>
<td>5:15 - 5:25</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>5:25 - 6:00</td>
<td>GENERAL ASSEMBLY</td>
</tr>
<tr>
<td>7:00 - 9:00</td>
<td>COSTUME CONTEST</td>
</tr>
<tr>
<td>7:30 - 9:00</td>
<td>SKIT CONTEST</td>
</tr>
<tr>
<td>7:15 - 8:00</td>
<td>ESSAY CONTEST</td>
</tr>
<tr>
<td>8:00 - 8:30</td>
<td>IMPROMPTU ART</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>SERVICE PROJECT</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>BOARD GAMES</td>
</tr>
</tbody>
</table>
<!--table for Saturday events-->
<table id="saturday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR SATURDAY, APRIL 1</strong></th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>SCRAPBOOK CHECK-IN</td>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>GRAPHIC ARTS</td>
</tr>
<tr>
<td>8:15 - 8:45</td>
<td>CONVENTION REGISTRATION AND SATURDAY CHECK-IN</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>ACADEMIC TESTING (all levels)</td>
</tr>
<tr>
<td>10:15 - 10:45</td>
<td>SEMINAR SESSION I</td>
</tr>
<tr>
<td>10:30 - 12:30</td>
<td>DRAMATIC INTERPRETATION</td>
</tr>
<tr>
<td>10:30 - 11:00</td>
<td>MIDDLE SCHOOL CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>SEMINAR SESSION II</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>ADVANCED CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:30 - 12:00</td>
<td>INTERMEDIATE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:00 - 12:30</td>
<td>NOVICE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:30 - 3:00</td>
<td>GRAPHIC ARTS VIEWING</td>
</tr>
<tr>
<td>12:45 - 1:30</td>
<td>"MEET THE CANDIDATES" MEETING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>LATIN SIGHT READING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>ENGLISH ORATORY</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>OPEN CERTAMEN</td>
</tr>
<tr>
<td>1:30 - 2:30</td>
<td>OLYMPIKA I</td>
</tr>
<tr>
<td>2:00</td>
<td>VOTING BALLOTS DUE</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>OLYMPIKA II</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>CHARIOT RACING AND CATAPULT</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>GRAPHIC ARTS PICKUP</td>
</tr>
<tr>
<td>4:20 - 4:30</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>4:30 - 5:00</td>
<td>CLOSING GENERAL ASSEMBLY</td>
</tr>
</tbody>
</table>
</div>
And my CSS:
#slider{
height: 1530px;
width: 524.317px;
transition: all 2s ease-in-out;
}
.hidden{
height: 0;
}
And the JS:
//script for slide down reveal for table
//to avoid taking up too much space
function toggleFlipFlop() {
var toggleSwitch = $("#toggleSwitch");
var slider = $("#slider");
console.log("HTML elements translated to objects");
function slideMe(slider) {
slider.toggleClass("hidden");
console.log("hidden class toggled");
};
console.log("SlideMe() successfully defined");
toggleSwitch.onclick = slideMe(slider);
console.log("onclick attribute of toggleswitch set");
}

You're over complicating. You use an inline onClick that calls a function that instantiates a function that calls again a click on the same button... ehh
Also, since you cannot reliably animate/toggle height in CSS3 use jQuery slideToggle()
function toggleFlipFlop() {
$("#slider").slideToggle(1000);
}
// REMOVE inline JS: onClick="toggleFlipFlop();"
// and use this:
$("#toggleSwitch").on("click", toggleFlipFlop);
#slider {
height: 1530px;
width: 524.317px;
/*transition: all 1s ease-in-out; you cannot use this I'm sorry. */
}
.hidden {
display: none; /* use this instead */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><strong>SPRING CONVENTION SCHEDULE OF EVENTS</strong></h2>
<br>
<button id="toggleSwitch">Click here to show table</button>
<!--table for Friday events-->
<div id="slider" class="hidden">
<table id="friday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR FRIDAY, MARCH 31</strong></th>
</tr>
<tr>
<td>3:45 - 5:00</td>
<td>CONVENTION REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 5:15</td>
<td>GRAPHIC ARTS REGISTRATION</td>
</tr>
<tr>
<td>4:30 - 4:50</td>
<td>CANDIDATES MEETING</td>
</tr>
<tr>
<td>5:15 - 5:25</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>5:25 - 6:00</td>
<td>GENERAL ASSEMBLY</td>
</tr>
<tr>
<td>7:00 - 9:00</td>
<td>COSTUME CONTEST</td>
</tr>
<tr>
<td>7:30 - 9:00</td>
<td>SKIT CONTEST</td>
</tr>
<tr>
<td>7:15 - 8:00</td>
<td>ESSAY CONTEST</td>
</tr>
<tr>
<td>8:00 - 8:30</td>
<td>IMPROMPTU ART</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>SERVICE PROJECT</td>
</tr>
<tr>
<td>8:00 - 9:30</td>
<td>BOARD GAMES</td>
</tr>
</tbody>
</table>
<!--table for Saturday events-->
<table id="saturday-table">
<tbody>
<tr>
<th colspan="2"><strong>SCHEDULE OF EVENTS FOR SATURDAY, APRIL 1</strong></th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>SCRAPBOOK CHECK-IN</td>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td>GRAPHIC ARTS</td>
</tr>
<tr>
<td>8:15 - 8:45</td>
<td>CONVENTION REGISTRATION AND SATURDAY CHECK-IN</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>ACADEMIC TESTING (all levels)</td>
</tr>
<tr>
<td>10:15 - 10:45</td>
<td>SEMINAR SESSION I</td>
</tr>
<tr>
<td>10:30 - 12:30</td>
<td>DRAMATIC INTERPRETATION</td>
</tr>
<tr>
<td>10:30 - 11:00</td>
<td>MIDDLE SCHOOL CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>SEMINAR SESSION II</td>
</tr>
<tr>
<td>11:00 - 11:30</td>
<td>ADVANCED CERTAMEN FINALS</td>
</tr>
<tr>
<td>11:30 - 12:00</td>
<td>INTERMEDIATE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:00 - 12:30</td>
<td>NOVICE CERTAMEN FINALS</td>
</tr>
<tr>
<td>12:30 - 3:00</td>
<td>GRAPHIC ARTS VIEWING</td>
</tr>
<tr>
<td>12:45 - 1:30</td>
<td>"MEET THE CANDIDATES" MEETING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>LATIN SIGHT READING</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>ENGLISH ORATORY</td>
</tr>
<tr>
<td>1:00 - 2:30</td>
<td>OPEN CERTAMEN</td>
</tr>
<tr>
<td>1:30 - 2:30</td>
<td>OLYMPIKA I</td>
</tr>
<tr>
<td>2:00</td>
<td>VOTING BALLOTS DUE</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>OLYMPIKA II</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>CHARIOT RACING AND CATAPULT</td>
</tr>
<tr>
<td>3:00 - 3:30</td>
<td>GRAPHIC ARTS PICKUP</td>
</tr>
<tr>
<td>4:20 - 4:30</td>
<td>SPIRIT COMPETITION</td>
</tr>
<tr>
<td>4:30 - 5:00</td>
<td>CLOSING GENERAL ASSEMBLY</td>
</tr>
</tbody>
</table>
</div>
Yep. You cannot transition height reliably in CSS3. (min-height eventually, but even than it's not perfect)

jQuery hiding columns on different tables

I have the following code, but I can't tell why it is hiding columns on different tables. It seems that it is ignoring the first part of the selector which is the table id.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table3">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
</script>
</body>
I tried this solution first https://stackoverflow.com/a/5901376/3658485
Am I going to have to select the table and iterate over its th / tds?

you should put this:
'#table1 td:nth-child(4), #table1 th:nth-child(4)'

$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
Your code is selecting the td:nth-child(4) of table 1, but it is also selecting the th:nth-child(4) of all tables.
Best solution is call the td/th you want hidden and give it the table like so:
$(document).ready(function() {
$('td:nth-child(4),th:nth-child(4)', '#table1').hide();
});

Categories

Resources