I've created a resizable table columns code by following bz's demo
But when I create more than 30 columns, the code does not work. The table I'm creating is pretty simple:
<table class="resizable" border="1">
<tr>
<td name="col1" align="center">Column 1</td>
<td name="col2" align="center">Column 2</td>
<td name="col3" align="center">Column 3</td>
<td name="col4" align="center">Column 4</td>
<td name="col5" align="center">Column 5</td>
<td name="col6" align="center">Column 6</td>
</tr>
</table>
Does anyone have any ideas which line should I change to make the code work?
Why not doing it on your own? Make a Table resizeable is pretty simple:
First add this to your onLoad:
$(".gridTableSeparator").bind("mousedown", function () {
var that = $(this).parent();
$("body").bind("mousemove", function (event) {
that.attr("width", event.pageX - that.offset().left);
});
$("body").bind("mouseup", function (event) {
$(this).unbind("mousemove mouseup");
});
});
Your table Header should look like this:
<td>
<div class="gridTableSeparator"></div>
<div class="gridTableHeadline">Tableheadline</div>
</td>
And format the separator and the headline like this:
.gridTableSeparator
{
width: 3px;
right:-4px;
height:40px;
float:right;
position:relative;
cursor: e-resize;
}
.gridTableHeadline
{
line-height: 40px;
overflow: hidden;
}
benefits of doing it on your own is that you have the full control and can change the look and functionality for your needs. Otherwise it would be great if you can post a fiddle, so we can see what went wrong if you add more than 30 rows.
Related
This question already has answers here:
How can I select an element which does not contain a certain child element?
(8 answers)
Closed 4 years ago.
I'm using jQuery to conduct some action while clicking a certain 'tr', yet within that object I would like jQuery to ignore one of the children td which contains a url.. Any ideas how can this be done?
<tr class="parent_report>
<tr class="child1">Some text</tr>
<tr class="child2">Some text</tr>
<tr class="child3"><span>Some text</span></tr>
</tr>
And the jQuery:
$(".special_report, .new_report ,.parent_report").not("span").click(function(event){
event.preventDefault();
//do some action
So I would like to ignore the jQuery when clicking the link in child3 and not doing the action configured to jQuery
Any ideas?
Thanks
You are saying that any of the classes you selected can not be a span. You are not saying what is clicked....
So you need to do the check inside of the click that the action is not an anchor
$("tr").on("click", function (evt) {
if ($(evt.target).closest("a").length) {
return true
} else {
console.log("tr was clicked");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
If you do not want any click on the td, than just ignore clicks on that td
$("tr").on("click", "td:not(:has(a))", function(evt) {
console.log("tr was clicked");
})
td {
padding: 1em;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
I'd move your click events to the table cells for more intuitive code.
$("td").not(':has("a")').click(function () {
console.log("tr was clicked");
});
<style>
td {
padding: 10px;
background: pink;
}
a {
background: lightgreen;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
How can I implement the infinite scroll on a table with the merged cells?
I want to implement pivot grid with lots of data to be processed. The difficulty is drawing only visible parts of headers (+ scrolling buffer).
Possible solutions:
Without smooth scrolling, discretely, redraw all table header. (I would like smoothness)
Implement the div-table and organize creating and deleting items on scroll event. (Could not find an example of a dynamic div-table with the merged cells)
Implement the table header from the sequence of tables, that created and removed as necessary. (delete borders, share labels between the nearby tables)
Example:
var xHeaderWrapperEl = document.querySelector(".header-wrapper");
var xHeaderTableEl = document.querySelector(".header-table");
xHeaderWrapperEl.addEventListener("scroll", function () {
if (xHeaderWrapperEl.scrollLeft >= xHeaderTableEl.offsetWidth - xHeaderWrapperEl.offsetWidth){
console.log("scroll next page");
} else if (xHeaderWrapperEl.scrollLeft <= 0) {
console.log("scroll prev page");
} else {
console.log("scroll");
}
});
.header-wrapper {
overflow-x: scroll;
width: 250px;
height: auto;
display: flex;
//flex-flow: row nowrap;
}
<body>
<div class="header-wrapper">
<!-- 1st block -->
<table class="header-table" border="1">
<tr>
<td colspan="10"><div>0x1</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="8" rowspan="2"><div>1x2</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 2nd block -->
<table class="header-table" border="1">
<tr>
<td colspan="4"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><div>1x1</div></td>
<td colspan="6"><div>1x2</div></td>
</tr>
<tr>
<td colspan="6"><div>2x1</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
<!-- 3rd block -->
<table class="header-table" border="1">
<tr>
<td colspan="2"><div>0x1</div></td>
<td colspan="6"><div>0x2</div></td>
<td colspan="2"><div>0x3</div></td>
</tr>
<tr>
<td colspan="2"><div>1x1</div></td>
<td colspan="2"><div>1x2</div></td>
<td colspan="2"><div>1x3</div></td>
<td colspan="2"><div>1x4</div></td>
<td colspan="2"><div>1x5</div></td>
</tr>
<tr>
<td colspan="2"><div>2x1</div></td>
<td colspan="2"><div>2x2</div></td>
<td colspan="2"><div>2x3</div></td>
<td colspan="2"><div>2x4</div></td>
<td colspan="2"><div>2x5</div></td>
</tr>
<tr>
<td><div>3x1</div></td>
<td><div>3x2</div></td>
<td><div>3x3</div></td>
<td><div>3x4</div></td>
<td><div>3x5</div></td>
<td><div>3x6</div></td>
<td><div>3x7</div></td>
<td><div>3x8</div></td>
<td><div>3x9</div></td>
<td><div>3x10</div></td>
</tr>
</table>
</div>
</body>
Take note flexbox...
I am assuming that you will have 1mln columns table according to your answer.
It is not realistic to have such a table continuously scrollable.
It will take forever to scroll/find/consume information from there.
Therefore you have to have some pagination / filtering mechanism there.
And with the pagination your problem is less severe. Split it in partial table blocks wrapped in scrollable page container. So you will have scrollable pages similar to gmail's message list - paginated yet scrollable.
I don't actually have any code relating to this, as it is completely hypothetical, but I was just wondering how simple it would be to do.
Lets say, for example, I have a standard table with 4 cells.
<html>
<head></head>
<body>
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Now I want to hover over cell 2 and have an image display in cell 3... Is this possible using JavaScript?
Here is a more generic example with pure JavaScript. It changes the background of the next td for all the td. For the last one it will change the background of the first. Setting to a background image would be as simple as changing the CSS to use background-image instead of background-color.
jsFiddle
JavaScript
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
tds[i].onmouseover = (function (i) {
return function () {
tds[(i + 1) % tds.length].className = 'hovered';
}
})(i);
tds[i].onmouseout = (function (i) {
return function () {
tds[(i + 1) % tds.length].className = '';
}
})(i);
}
CSS
.hovered {
background-color:#F00;
}
Give this code a try. Keep in mind that this does exactly what you asked, no more, no less. You'll want to extend this code properly using classes (instead of IDs) if you want a maintainable solution, but that would be beyond the scope of this question.
<html>
<head></head>
<body>
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td id="hoverover">Cell 2</td>
</tr>
<tr>
<td id="changeme">Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
<script>
var hoverEl = document.getElementById('hoverover'),
changeEl = document.getElementById('changeme');
hoverEl.addEventListener('mouseover', function() {
changeEl.innerHTML = '<img src="/path/to/image" />';
}, false);
hoverEl.addEventListener('mouseout', function() {
changeEl.innerHTML = 'Cell 3';
}, false);
</script>
</body>
</html>
You can try to achive that using only css. There are at least two selectros that might be helpful.
First one is +, second one is nth-child(). So lets say you always want to display the image in table cell n+1, where n is the cell you're hovering:
<table>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td><img src="yoursource.jpg"></td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td><img src="yoursource2.jpg"></td>
</tr>
</table>
You can try it this way:
img { display: none; }
tr:hover + tr img { display: block; }
Or you can create rule using css3 selectors:
img { display: none; }
tr:nth-child(n+1):hover + tr img { display: block; }
I guess there are few more ways to do it only by using css, but of course it'll work only if you have images already in your code (you didn't precise if you want to just display them or load them).
working example
See the code below, If you click on the sub-title row it then will hide the rows with it. It work well.
On the second sub-title row (<tr class="sub-title default-hide">) - I want this to toggle/hidden by default when the page loaded.. How to do this without writing duplicate code like below?
$(".sub-title").on("click",function() {
tr = $(this).find('span').hasClass("arrow2");
trSpan = $(this).find('span');
$(this).nextUntil(".sub-title").each(function() {
if (!$(this).hasClass('head-order')) {
$(this).toggle();
if (tr) {
trSpan.removeClass('arrow2').addClass('arrow1');
} else {
trSpan.removeClass('arrow1').addClass('arrow2');
}
}
});
});
HTML
<table border="1">
<tbody>
<tr class="head">
<td> title </td>
</tr>
<tr class="sub-title">
<td>Sub Title 1 <span class="arrow2"> </span></td>
</tr>
<tr> <td>Item 1</td> </tr>
<tr> <td>Item 2</td> </tr>
<tr> <td>Item 3</td> </tr>
<tr class="sub-title default-hide">
<td>Sub Title 2 <span class="arrow2"></span></td>
</tr>
<tr> <td>Item 4</td> </tr>
<tr> <td>Item 5</td> </tr>
<tr> <td>Item 6</td> </tr>
</tbody>
</table>
I created a jsFiddle example with the information you provided.
I edited the code a bit, using a default arrow-class and just adding the class close to it, to define the new style, which should make the code a little shorter.
$(".sub-title").on("click",function() {
var trSpan = $(this).find('span');
trSpan.toggleClass('closed');
$(this).nextUntil(".sub-title").each(function() {
if (!$(this).hasClass('head-order')) {
$(this).toggle();
}
});
});
To make the "default-hidden" - element closed on pageload, all I do is to trigger a click-event on it after binding the click-Handler.
$('.default-hide').trigger('click');
See the fiddle for a working example
Create a named function and call it a couple times:
var toggleArrow = function(el) {
tr = $(el).find('span').hasClass("arrow2");
trSpan = $(el).find('span');
$(el).nextUntil(".sub-title").each(function() {
if (!$(el).hasClass('head-order')) {
$(el).toggle();
if (tr) {
trSpan.removeClass('arrow2').addClass('arrow1');
} else {
trSpan.removeClass('arrow1').addClass('arrow2');
}
}
});
};
$(".sub-title").on("click", function(){ toggleArrow(this); });
$(".default-hide").each(function(i, el){ toggleArrow(this); });
You can trigger the click event manually for the default-hide rows.
Like this
$('.default-hide').trigger('click');
I'm wondering if the following can be done.
I have a list of 'expenses' that I'm displaying in a table. 4 columns - amount, date, where, and what.
I was thinking I'd like to make each clickable via jQuery which would expand that particular expense, inline, to show a more detailed description.
What I'm trying to do is, on click, replace the contents of the 'tr' with a single 'td' that would contain the extended info. Problem is that 'td' only expands to about a quarter of the table. Is there any way of making it extend to the whole row, while maintaining the widths of the other 'td's in the other rows?
Here's what I would do. Working Demo.
<table id="expenses">
<thead>
<tr>
<td>Amount</td>
<td>Date</td>
<td>Where</td>
<td>What</td>
</tr>
</thead>
<tbody>
<tr class='expense' id='expense-1'>
<td>$5.99</td>
<td>4/2/2009</td>
<td>Taco Bell</td>
<td>Chalupa</td>
</tr>
<tr class='details' id='details-1'>
<td colspan='4'>
It was yummy and delicious
</td>
</tr>
<tr class='expense' id='expense-2'>
<td>$4.99</td>
<td>4/3/2009</td>
<td>Burger King</td>
<td>Whopper</td>
</tr>
<tr class='details' id='details-2'>
<td colspan='4'>
The king of burgers, indeed!
</td>
</tr>
<tr class='expense' id='expense-3'>
<td>$25.99</td>
<td>4/6/2009</td>
<td>Olive Garden</td>
<td>Chicken Alfredo</td>
</tr>
<tr class='details' id='details-3'>
<td colspan='4'>
I love me some italian food!
</td>
</tr>
</tbody>
</table>
With styles like these:
#expenses tr.expense {
cursor: pointer;
}
#expenses tr.details {
display: none;
}
And then have Javascript that looks like this:
$(function() {
$('tr.expense', '#expenses').click(function() {
var id = $(this).attr('id').split('-').pop();
var details = $('#details-'+id);
if(details.is(':visible')) {
details.hide();
} else {
details.show();
}
});
});
That should do it.
<td colspan="4"> ?