Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.
In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery
I leave the code so that you can see how I currently have it. Any ideas?
SCRIPT
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
CSS
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
HTML
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class= "text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < count($calls); ++$i) { ?>
<tr class="text-center">
<td id="id"><?= $calls[$i]['date'] ;?></td>
<td id="database"><?= $calls[$i]['calls'] ;?></td>
<td id="total"><?= $calls[$i]['sales'] ;?></td>
<td><div class="arrow"></div></td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>
As your dates are display in dd-mm-yyyy so easy way to get month is to use split method then once we get month we need to loop through trs to hide all month expect the first one and also add odd class to it.
Then, onclick of tr just get the month from td and then loop through trs with same month add up class to that td and show same tr.
Demo code:
//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
//get month
var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
//loop thorough tr to find same month tr
$("tbody > tr").not(this).each(function() {
var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
if (mnth == mnth_other) {
$(this).toggle();
$(this).find(".arrow").toggleClass("up");
}
});
});
var date_current;
//loop through tr
$("tbody > tr").each(function() {
//get month
var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
//check if not equal
if (date_current != dates) {
$(this).addClass("odd");
$(this).find(".arrow").addClass("down");
date_current = dates;
} else {
//hide other tr
$(this).hide()
}
})
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class="text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
21-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
12
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
20-12-2020
</td>
<td id="database">
222
</td>
<td id="total">
21
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>
Related
I currently have a small agenda with a dayview
when my dynamic table starts to have a lot of <td>'s, a horizontal scrollbar apears but when the user scrolls to the right, he no longer has visual on what time he's actually selecting. I've created a small example shown in the snippet.
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>
I'd like the table that shows what time you're selecting (a vertical table) to scroll with the screen to the right, but maintain position when scrolling up or down.
preferable a css solution but if Javascript is the only option I'd be forced to use that.
Before this gets flagged as duplicate, I've seen the other question Here and tried the fiddles BUT they did not work in the way I wanted
In this case, you may need to use position: sticky with left: 0 on .firstTableCon:
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position: -webkit-sticky;
position: sticky;
left: 0;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>
You can add overflow-y:hidden; in container
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
overflow-y:hidden;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>
I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?
HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)
I want to give orange color to even rows through jQuery in table.
But that is not working for me.
Below is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the code in custom.css:
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
Below is the code in custom.js:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
I am a beginner in jQuery.
I am looking for a short and simple way.
$(document).ready(function(){
$('.myTable tr:even').addClass('highlight');
});
Remove dot from addClass function
You dont really need jQuery to get this effect. Unless, you have a specific use case / requirement, you could just use the odd, even pseudo classes to accomplish your need.
Here is a sample.
table,
table td {
border: 1px solid white;
background: green;
color: white;
}
table tr:nth-child(even) td {
background-color: orange;
}
.highlight {
background: orange;
}
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
This is a small example using CSS and jQuery :
// Execute a function when the DOM is fully loaded.
$(document).ready(function () {
// Set the .alt class for the alternate rows
$('.myTable tr:nth-child(even)').addClass('alt');
});
/** Style for the body **/
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
.alt {
background-color:#eee;
}
/** Style for the table **/
.myTable {
border-collapse:collapse;
font-size: 0.917em;
max-width:500px;
min-width:450px;
}
.myTable td {
border:1px solid #333;
padding:4px 8px;
}
.myTable td:nth-child(1) {
width:200px;
}
.myTable td:nth-child(2) {
width:150px;
}
.myTable td:nth-child(3) {
width:100px;
}
/** Style for the cointainer **/
#body {
clear: both;
margin: 0 auto;
max-width: 534px;
}
html, body {
background-color:White;
}
hr {
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="body">
<h3>Table 1</h3>
<table class="myTable">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td>1600</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h3>Table 2</h3>
<table class="myTable">
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
</div>
You are almost there. The problems in your code are
You want to highlight td and your selector is tr.
Syntax for .addClass() should be addClass('highlight') and not addClass('.highlight').
Replace this:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
with:
$(document).ready(function(){
$('.myTable td:odd tr').addClass('highlight');
});
According to documentation :odd selects even rows:
In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.
RUNNING CODE:
$(document).ready(function(){
$('.myTable tr:odd td').addClass('highlight');
});
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
Is there any good and minimal plugin which fix <thead> or first row? And dont add <tbody> automatically.
When i am using <thead> to wrap the first row (directly in HTML Table) , then everything is working right as it should for my table. But when i am adding <thead> to wrap the first row (not HTML but through jquery) $("tr").first().wrap("<thead></thead>"); then it is working but not displaying as it should, because first its wrapping the whole table in <tbody> automatically then adding <thead> in first row.
Please tell me how to solve this because my tables don't have <thead> in HTML. But I need it to fix the first row when scrolling, because it is requirement in all jQuery Plugins to have <thead> to fix first row, please help
Working: http://jsfiddle.net/seky66cb/ (adding <thead> with HTML)
Not Working For Me: http://jsfiddle.net/seky66cb/1/ (adding <thead> with jQuery)
CODE (Not Working As Expected):
Library: jQuery: 2.1.3
HTML:
<table class="gridView" id="table2">
<tr>
<th> Culture Name </th>
<th> Display Name </th>
<th> Culture Code </th>
<th> ISO 639x </th>
</tr>
<tr class="grid">
<td> af-ZA </td>
<td> Afrikaans - South Africa </td>
<td> 0x0436 </td>
<td> AFK </td>
</tr>
<tr class="gridAlternada">
<td> sq-AL </td>
<td> Albanian - Albania </td>
<td> 0x041C </td>
<td> SQI </td>
</tr>
<tr class="grid">
<td> ar-DZ </td>
<td> Arabic - Algeria </td>
<td> 0x1401 </td>
<td> ARG </td>
</tr>
<tr class="gridAlternada">
<td> ar-BH </td>
<td> Arabic - Bahrain </td>
<td> 0x3C01 </td>
<td> ARH </td>
</tr>
<tr class="grid">
<td> ar-EG </td>
<td> Arabic - Egypt </td>
<td> 0x0C01 </td>
<td> ARE </td>
</tr>
<tr class="gridAlternada">
<td> ar-IQ </td>
<td> Arabic - Iraq </td>
<td> 0x0801 </td>
<td> ARI </td>
</tr>
<tr class="grid">
<td> ar-JO </td>
<td> Arabic - Jordan </td>
<td> 0x2C01 </td>
<td> ARJ </td>
</tr>
<tr class="gridAlternada">
<td> ar-KW </td>
<td> Arabic - Kuwait </td>
<td> 0x3401 </td>
<td> ARK </td>
</tr>
<tr class="grid">
<td> ar-LB </td>
<td> Arabic - Lebanon </td>
<td> 0x3001 </td>
<td> ARB </td>
</tr>
<tr class="gridAlternada">
<td> ar-LY </td>
<td> Arabic - Libya </td>
<td> 0x1001 </td>
<td> ARL </td>
</tr>
<tr class="grid">
<td> ar-MA </td>
<td> Arabic - Morocco </td>
<td> 0x1801 </td>
<td> ARM </td>
</tr>
<tr class="gridAlternada">
<td> ar-OM </td>
<td> Arabic - Oman </td>
<td> 0x2001 </td>
<td> ARO </td>
</tr>
<tr class="grid">
<td> ar-QA </td>
<td> Arabic - Qatar </td>
<td> 0x4001 </td>
<td> ARQ </td>
</tr>
<tr class="gridAlternada">
<td> ar-SA </td>
<td> Arabic - Saudi Arabia </td>
<td> 0x0401 </td>
<td> ARA </td>
</tr>
<tr class="grid">
<td> ar-SY </td>
<td> Arabic - Syria </td>
<td> 0x2801 </td>
<td> ARS </td>
</tr>
<tr class="gridAlternada">
<td> ar-TN </td>
<td> Arabic - Tunisia </td>
<td> 0x1C01 </td>
<td> ART </td>
</tr>
<tr class="grid">
<td> ar-AE </td>
<td> Arabic - United Arab Emirates </td>
<td> 0x3801 </td>
<td> ARU </td>
</tr>
<tr class="gridAlternada">
<td> ar-YE </td>
<td> Arabic - Yemen </td>
<td> 0x2401 </td>
<td> ARY </td>
</tr>
<tr class="grid">
<td> hy-AM </td>
<td> Armenian - Armenia </td>
<td> 0x042B </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> Cy-az-AZ </td>
<td> Azeri (Cyrillic) - Azerbaijan </td>
<td> 0x082C </td>
<td> </td>
</tr>
<tr class="grid">
<td> Lt-az-AZ </td>
<td> Azeri (Latin) - Azerbaijan </td>
<td> 0x042C </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> eu-ES </td>
<td> Basque - Basque </td>
<td> 0x042D </td>
<td> EUQ </td>
</tr>
<tr class="grid">
<td> be-BY </td>
<td> Belarusian - Belarus </td>
<td> 0x0423 </td>
<td> BEL </td>
</tr>
<tr class="gridAlternada">
<td> bg-BG </td>
<td> Bulgarian - Bulgaria </td>
<td> 0x0402 </td>
<td> BGR </td>
</tr>
<tr class="grid">
<td> ca-ES </td>
<td> Catalan - Catalan </td>
<td> 0x0403 </td>
<td> CAT </td>
</tr>
<tr class="gridAlternada">
<td> zh-CN </td>
<td> Chinese - China </td>
<td> 0x0804 </td>
<td> CHS </td>
</tr>
<tr class="grid">
<td> zh-HK </td>
<td> Chinese - Hong Kong SAR </td>
<td> 0x0C04 </td>
<td> ZHH </td>
</tr>
<tr class="gridAlternada">
<td> zh-MO </td>
<td> Chinese - Macau SAR </td>
<td> 0x1404 </td>
<td> </td>
</tr>
<tr class="grid">
<td> zh-SG </td>
<td> Chinese - Singapore </td>
<td> 0x1004 </td>
<td> ZHI </td>
</tr>
<tr class="gridAlternada">
<td> zh-TW </td>
<td> Chinese - Taiwan </td>
<td> 0x0404 </td>
<td> CHT </td>
</tr>
<tr class="grid">
<td> zh-CHS </td>
<td> Chinese (Simplified) </td>
<td> 0x0004 </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> zh-CHT </td>
<td> Chinese (Traditional) </td>
<td> 0x7C04 </td>
<td> </td>
</tr>
<tr class="grid">
<td> hr-HR </td>
<td> Croatian - Croatia </td>
<td> 0x041A </td>
<td> HRV </td>
</tr>
<tr class="gridAlternada">
<td> cs-CZ </td>
<td> Czech - Czech Republic </td>
<td> 0x0405 </td>
<td> CSY </td>
</tr>
<tr class="grid">
<td> da-DK </td>
<td> Danish - Denmark </td>
<td> 0x0406 </td>
<td> DAN </td>
</tr>
<tr class="gridAlternada">
<td> div-MV </td>
<td> Dhivehi - Maldives </td>
<td> 0x0465 </td>
<td> </td>
</tr>
<tr class="grid">
<td> nl-BE </td>
<td> Dutch - Belgium </td>
<td> 0x0813 </td>
<td> NLB </td>
</tr>
</table>
jQuery:
$( "tr" ).first().wrap( "<thead></thead>" );
(function ($) {
$.fn.freezeHeader = function (params) {
var copiedHeader = false;
var idObj = this.selector.replace('#', '');
var container;
var grid;
var conteudoHeader;
var openDivScroll = '';
var closeDivScroll = '';
if (params && params.height !== undefined) {
divScroll = '<div id="hdScroll' + idObj + '" style="height: ' + params.height + '; overflow-y: scroll">';
closeDivScroll = '</div>';
}
grid = $('table[id$="' + idObj + '"]');
conteudoHeader = grid.find('thead');
if (params && params.height !== undefined) {
if ($('#hdScroll' + idObj).length == 0) {
grid.wrapAll(divScroll);
}
}
var obj = params && params.height !== undefined
? $('#hdScroll' + idObj)
: $(window);
if ($('#hd' + idObj).length == 0) {
grid.before('<div id="hd' + idObj + '"></div>');
}
obj.scroll(function () { freezeHeader(); })
function freezeHeader() {
if ($('table[id$="' + idObj + '"]').length > 0) {
container = $('#hd' + idObj);
if (conteudoHeader.offset() != null) {
if (limiteAlcancado(params)) {
if (!copiedHeader) {
cloneHeaderRow(grid);
copiedHeader = true;
}
}
else {
if (($(document).scrollTop() > conteudoHeader.offset().top)) {
container.css("position", "absolute");
container.css("top", (grid.find("tr:last").offset().top - conteudoHeader.height()) + "px");
}
else {
container.css("visibility", "hidden");
container.css("top", "0px");
container.width(0);
}
copiedHeader = false;
}
}
}
}
function limiteAlcancado(params) {
if (params && params.height !== undefined) {
return (conteudoHeader.offset().top <= obj.offset().top);
}
else {
return ($(document).scrollTop() > conteudoHeader.offset().top && $(document).scrollTop() < (grid.height() - conteudoHeader.height() - grid.find("tr:last").height()) + conteudoHeader.offset().top);
}
}
function cloneHeaderRow() {
container.html('');
container.val('');
var tabela = $('<table style="margin: 0 0;"></table>');
var atributos = grid.prop("attributes");
$.each(atributos, function () {
if (this.name != "id") {
tabela.attr(this.name, this.value);
}
});
tabela.append('<thead>' + conteudoHeader.html() + '</thead>');
container.append(tabela);
container.width(conteudoHeader.width());
container.height(conteudoHeader.height);
container.find('th').each(function (index) {
var cellWidth = grid.find('th').eq(index).width();
$(this).css('width', cellWidth);
});
container.css("visibility", "visible");
if (params && params.height !== undefined) {
container.css("top", obj.offset().top + "px");
container.css("position", "absolute");
} else {
container.css("top", "0px");
container.css("position", "fixed");
}
}
};
})(jQuery);
$(document).ready(function () {
$("#table1").freezeHeader({ 'height': '300px' });
$("#table2").freezeHeader();
$("#tbex1").freezeHeader();
$("#tbex2").freezeHeader();
$("#tbex3").freezeHeader();
$("#tbex4").freezeHeader();
})
CSS:
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
*{
margin:0;
padding:0;
}
body{
font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#fefefe;
color:#333;
text-shadow:1px 1px 1px #fff;
overflow-x:hidden;
}
h1{
font-size:30px;
color:#666;
}
h2{
font-size:20px;
padding:10px 0px 10px 0px;
margin:15px 0px 20px 0px;
}
a{
color:#555;
text-decoration:none;
}
a:hover{
color:#222;
}
p{
padding:5px 0px;
}
.wrapper{
width:960px;
margin:20px auto;
}
.clear{
clear:both;
}
/* ----------->>> GridView <<<----------*/
.gridView
{
width: 100%;
clear: both;
margin: 10px 0;
border: medium none !important;
border-collapse: collapse;
}
.gridView tr td
{
border: 1px solid #aaa;
vertical-align: top;
}
.gridView thead tr, .footer
{
font: bold 11px Arial;
vertical-align: middle;
text-decoration: none;
text-align: center;
}
/* --->>> HeaderStyle (cabeçalho) <<<---*/
.gridView thead tr
{
color: #333;
background: #fff url(../images/bg-header-grid.png) bottom repeat-x;
vertical-align: middle;
height: 25px;
}
.gridView thead tr th
{
border: 1px solid #E2E6E6;
border-bottom: 3px solid #E5E5E5;
vertical-align: middle;
}
.gridView thead tr a
{
font: bold 11px Arial, Verdana;
color: #333;
padding: 0 0 0 10px;
text-decoration: underline;
background: url(../images/Icones/ico-ordem.gif) left no-repeat;
vertical-align: middle;
}
.gridView thead tr a:hover
{
color: #06c;
background: url(../images/Icones/ico-ordem-hover.gif) left no-repeat;
}
/* ---->>> FooterStyle (rodapé) <<<------*/
.footer
{
height: 20px;
width: auto;
margin: 0 auto;
text-align: center;
padding: 5px;
}
/*PagerStyle*/
.footer a, .footer span
{
color: #555;
padding: 2px 6px 2px 6px;
border: 1px solid #bcbcbc;
background: #F1F1F1 url(../images/bg-pg.png) bottom repeat-x;
text-decoration: none;
}
.footer a:hover
{
color: #C40B17;
background-color: #fff;
background-image: none;
border: 1px solid #890812;
}
.footer span
{
color: #fff;
background: #D7403F url(../images/bg-pg-focus.png) bottom repeat-x;
border: 1px solid #890812;
}
/* ------------>>> Grid <<<--------------*/
.grid, .gridAlternada, .gridDestacada
{
font: 11px Arial,Verdana;
text-align: left;
text-align: center;
vertical-align: middle;
}
.grid:hover, .gridAlternada:hover, .gridDestacada:hover
{
color: #000;
background: #D4E5F6 url(../images/bg-dia.png) 0 0 repeat-x;
}
.grid
{
background-color: #fff;
}
/*RowStyle*/
.gridAlternada
{
background-color: #eee;
}
/*AlternatingRowStyle*/
.gridDestacada
{
background-color: #FFE082;
color: #333;
}
/*SelectedRowStyle / EditRowStyle*/
/* -------->>> Link Grid's <<<-----------*/
.grid a, .gridAlternada a, .gridDestacada a
{
color: #384249;
text-decoration: none;
}
.grid a:hover, .gridAlternada a:hover, .gridDestacada a:hover
{
color: #000;
text-decoration: underline;
}
A simple solution is after wrapping the first row in the <thead>, move the <thead> out of the <tbody> and prepend it to the table.
$( "tr" ).first().wrap( "<thead></thead>" ).parent().prependTo('.gridView');
Updated fiddle
I want to draw a table
P
Q [A B]
[C D]
where A, B, C, D are drawn with a border. Q and P are labels for the table and should not be drawn with a border. Q and P should be aligned with A.
How to achieve this? I can control which row to draw a border, but it won't help because I can't draw a border for the whole row.
td {
border: 1px solid #999;
padding: 10px;
}
td.no-border {
border: 0;
}
tr.no-border td {
border: 0;
}
<table>
<tr class="no-border">
<td></td>
<td colspan="2">p</td>
</tr>
<tr>
<td class="no-border">q</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td class="no-border"></td>
<td>c</td>
<td>d</td>
</tr>
</table>
I've created an ad hoc css class helper no-border, and applied it only to the cells I want to be borderless.
Do something like:
<table border="0" cellspacing="0">
<tr>
<th> </th>
<th>P</th>
<th> </th>
</tr>
<tr>
<th>Q</th>
<td class="border">A</td>
<td class="border">B</td>
</tr>
<tr>
<th> </th>
<td class="border">C</td>
<td class="border">D</td>
</tr>
</table>
Then use CSS:
td.border { border: 1px solid #000 }
This one is non table solution.
<div id="container">
<div class="row">
<div id="top">P</div>
</div>
<div class="row">
<div id="left">Q</div>
<div id="table">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
</div>
<div class="row">
<div class="cell">C</div>
<div class="cell">D</div>
</div>
<div class="row"></div>
</div>
</div>
</div>
CSS
.cell{
float:left;
width:50px;
border:1px solid #c0c0c0;
}
.row{
display:block;
overflow:auto;
}
#container{
display:block;
overflow:auto;
}
#top{
display:block;
overflow:auto;
margin-left:20px;
}
#left{
float:left;
overflow:auto;
}
#table{
float:left;
overflow:auto;
margin:5px;
margin-top:0px;
}
JSFiddle: http://jsfiddle.net/harendra/EUZru/
Does this solution (pure HTML) works for you ?
<table>
<tr>
<td></td>
<td colspan="2">P</td>
</tr>
<tr>
<td>Q</td>
<td rowspan="2">
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
example in jsfiddle