$(function() {
$('table').tableHeadFixer();
});
(function ($) {
$.fn.tableHeadFixer = function (param) {
return this.each(function() {
table.call(this);
});
function table() {
{
var defaults = {
head: true,
foot: false,
left: 0,
right: 0,
'z-index': 0
};
var settings = $.extend({}, defaults, param);
settings.table = this;
settings.parent = $(settings.table).parent();
setParent();
if (settings.head == true)
fixHead();
if (settings.foot == true)
fixFoot();
if (settings.left > 0)
fixLeft();
if (settings.right > 0)
fixRight();
setCorner();
$(settings.parent).trigger("scroll");
$(window).resize(function() {
$(settings.parent).trigger("scroll");
});
/*
This function solver z-index problem in corner cell where fix row and column at the same time,
set corner cells z-index 1 more then other fixed cells
*/
function setCorner() {
var table = $(settings.table);
if (settings.head) {
if (settings.left > 0) {
var tr = table.find("thead tr");
tr.each(function (k, row) {
solverLeftColspan(row, function (cell) {
$(cell).css("z-index", settings['z-index'] + 1);
});
});
}
if (settings.right > 0) {
var tr = table.find("thead tr");
tr.each(function (k, row) {
solveRightColspan(row, function (cell) {
$(cell).css("z-index", settings['z-index'] + 1);
});
});
}
}
if (settings.foot) {
if (settings.left > 0) {
var tr = table.find("tfoot tr");
tr.each(function (k, row) {
solverLeftColspan(row, function (cell) {
$(cell).css("z-index", settings['z-index']);
});
});
}
if (settings.right > 0) {
var tr = table.find("tfoot tr");
tr.each(function (k, row) {
solveRightColspan(row, function (cell) {
$(cell).css("z-index", settings['z-index']);
});
});
}
}
}
// Set style of table parent
function setParent() {
var parent = $(settings.parent);
var table = $(settings.table);
parent.append(table);
parent
.css({
'overflow-x': 'auto',
'overflow-y': 'auto'
});
parent.scroll(function() {
var scrollWidth = parent[0].scrollWidth;
var clientWidth = parent[0].clientWidth;
var scrollHeight = parent[0].scrollHeight;
var clientHeight = parent[0].clientHeight;
var top = parent.scrollTop();
var left = parent.scrollLeft();
if (settings.head)
this.find("thead tr > *").css("top", top);
if (settings.foot)
this.find("tfoot tr > *").css("bottom", scrollHeight - clientHeight - top);
if (settings.left > 0)
settings.leftColumns.css("left", left);
if (settings.right > 0)
settings.rightColumns.css("right", scrollWidth - clientWidth - left);
}.bind(table));
}
// Set table head fixed
function fixHead() {
var thead = $(settings.table).find("thead");
var tr = thead.find("tr");
var cells = thead.find("tr > *");
setBackground(cells);
cells.css({
'position': 'relative'
});
}
// Set table foot fixed
function fixFoot() {
var tfoot = $(settings.table).find("tfoot");
var tr = tfoot.find("tr");
var cells = tfoot.find("tr > *");
setBackground(cells);
cells.css({
'position': 'relative'
});
}
// Set table left column fixed
function fixLeft() {
var table = $(settings.table);
// var fixColumn = settings.left;
settings.leftColumns = $();
var tr = table.find("tr");
tr.each(function (k, row) {
solverLeftColspan(row, function (cell) {
settings.leftColumns = settings.leftColumns.add(cell);
});
// var inc = 1;
// for(var i = 1; i <= fixColumn; i = i + inc) {
// \t var nth = inc > 1 ? i - 1 : i;
// \t var cell = $(row).find("*:nth-child(" + nth + ")");
// \t var colspan = cell.prop("colspan");
// \t settings.leftColumns = settings.leftColumns.add(cell);
// \t inc = colspan;
// }
});
var column = settings.leftColumns;
column.each(function (k, cell) {
var cell = $(cell);
setBackground(cell);
cell.css({
'position': 'relative'
});
});
}
// Set table right column fixed
function fixRight() {
var table = $(settings.table);
var fixColumn = settings.right;
settings.rightColumns = $();
var tr = table.find("tr");
tr.each(function (k, row) {
solveRightColspan(row, function (cell) {
settings.rightColumns = settings.rightColumns.add(cell);
});
});
var column = settings.rightColumns;
column.each(function (k, cell) {
var cell = $(cell);
setBackground(cell);
cell.css({
'position': 'relative'
});
});
}
// Set fixed cells backgrounds
function setBackground(elements) {
elements.each(function (k, element) {
var element = $(element);
var parent = $(element).parent();
var elementBackground = element.css("background-color");
elementBackground = (elementBackground == "transparent" || elementBackground == "rgba(0, 0, 0, 0)") ? null : elementBackground;
var parentBackground = parent.css("background-color");
parentBackground = (parentBackground == "transparent" || parentBackground == "rgba(0, 0, 0, 0)") ? null : parentBackground;
var background = parentBackground ? parentBackground : "white";
background = elementBackground ? elementBackground : background;
element.css("background-color", background);
});
}
function solverLeftColspan(row, action) {
var fixColumn = settings.left;
var inc = 1;
for (var i = 1; i <= fixColumn; i = i + inc) {
var nth = inc > 1 ? i - 1 : i;
var cell = $(row).find("> *:nth-child(" + nth + ")");
var colspan = cell.prop("colspan");
if (cell.cellPos().left < fixColumn) {
action(cell);
}
inc = colspan;
}
}
function solveRightColspan(row, action) {
var fixColumn = settings.right;
var inc = 1;
for (var i = 1; i <= fixColumn; i = i + inc) {
var nth = inc > 1 ? i - 1 : i;
var cell = $(row).find("> *:nth-last-child(" + nth + ")");
var colspan = cell.prop("colspan");
action(cell);
inc = colspan;
}
}
}
}
};
})(jQuery);
/* cellPos jQuery plugin
---------------------
Get visual position of cell in HTML table (or its block like thead).
Return value is object with "top" and "left" properties set to row and column index of top-left cell corner.
Example of use:
$("#myTable tbody td").each(function(){
$(this).text($(this).cellPos().top +", "+ $(this).cellPos().left);
});
*/
(function ($) {
/* scan individual table and set "cellPos" data in the form { left: x-coord, top: y-coord } */
function scanTable($table) {
var m = [];
$table.children("tr").each(function (y, row) {
$(row).children("td, th").each(function (x, cell) {
var $cell = $(cell),
cspan = $cell.attr("colspan") | 0,
rspan = $cell.attr("rowspan") | 0,
tx, ty;
cspan = cspan ? cspan : 1;
rspan = rspan ? rspan : 1;
for (; m[y] && m[y][x]; ++x); //skip already occupied cells in current row
for (tx = x; tx < x + cspan; ++tx) { //mark matrix elements occupied by current cell with true
for (ty = y; ty < y + rspan; ++ty) {
if (!m[ty]) { //fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var pos = {top: y, left: x};
$cell.data("cellPos", pos);
});
});
};
/* plugin */
$.fn.cellPos = function (rescan) {
var $cell = this.first(),
pos = $cell.data("cellPos");
if (!pos || rescan) {
var $table = $cell.closest("table, thead, tbody, tfoot");
scanTable($table);
}
pos = $cell.data("cellPos");
return pos;
}
})(jQuery);
body {
background: #f3f5f6;
}
table {
margin-top: -2px;
}
table td {
border: 1px solid black
}
div {
margin: 10px 20px;
overflow: auto;
height: 200px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table style='height: 300px; width: 400px; padding-top: 0'>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
<th>Head6</th>
</tr>
</thead>
<tbody>
<tr>
<td>data11</td>
<td>data12</td>
<td>data13</td>
<td>data14</td>
<td>data15</td>
<td>data16</td>
</tr>
<tr>
<td>data21</td>
<td>data22</td>
<td>data23</td>
<td>data24</td>
<td>data25</td>
<td>data26</td>
</tr>
<tr>
<td>data31</td>
<td>data32</td>
<td>data33</td>
<td>data34</td>
<td>data35</td>
<td>data36</td>
</tr>
<tr>
<td>data41</td>
<td>data42</td>
<td>data43</td>
<td>data44</td>
<td>data45</td>
<td>data46</td>
</tr>
<tr>
<td>data51</td>
<td>data52</td>
<td>data53</td>
<td>data54</td>
<td>data55</td>
<td>data56</td>
</tr>
<tr>
<td>data61</td>
<td>data62</td>
<td>data63</td>
<td>data64</td>
<td>data65</td>
<td>data66</td>
</tr>
<tr>
<td>data71</td>
<td>data72</td>
<td>data73</td>
<td>data74</td>
<td>data75</td>
<td>data76</td>
</tr>
<tr>
<td>data81</td>
<td>data82</td>
<td>data83</td>
<td>data84</td>
<td>data85</td>
<td>data86</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Foot1</th>
<th>Foot2</th>
<th>Foot3</th>
<th>Foot4</th>
<th>Foot5</th>
<th>Foot6</th>
</tr>
</tfoot>
</table>
</div>
Dank. Das behebt es definitiv in diesem speziellen Fall, aber ich entdeckte, dass das allgemeinere Problem ist, wenn Sie etwas in der div vor der Tabelle haben. Ich habe die jsfiddle unter https://jsfiddle.net/peterkronenberg/n5uzoLcw/ aktualisiert. Gibt es eine allgemeinere Lösung oder macht das Plugin es einfach falsch? –
Es sieht so aus als ob das Plugin es nur falsch macht :( – Dekel