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');
Related
I have a table like below
<table id="categoriesTable">
<tr id=row_id1_dynamicdata>
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id2_dynamicdata>
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata>
<td>...</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata>
<td>...</td>
<td>..</td>
</tr>
</table>
I want to hide all rows except row whose id contains id4. I won't have full id.
I came up with below jQuery code, but as I don't have full id, it doesn't work.
var idValue = document.getElementById(someElement);
$('#categoreisTable').find('tr').not($('#row_' +idValue)).hide();
How to filter with only half the id?
You can use the "Attribute starts with" selector to find the rows which don't match the one with the specified idValue. For example:
$('#someElement').on('change', function() {
var idValue = this.value;
$('#categoriesTable')
.find('tr')
.show() // not needed if you only want to hide
.not('[id^="row_id' + idValue + '_"]')
.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="categoriesTable">
<tr id=row_id1_dynamicdata>
<td>.1..</td>
<td>..</td>
</tr>
<tr id=row_id2_dynamicdata>
<td>.2..</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata>
<td>.3..</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata>
<td>.4..</td>
<td>..</td>
</tr>
</table>
<input type="text" id="someElement" />
You can use querySelectorall on the tr element and then run a loop to only show rows that include id4 in their id.
Run the snippet below:
var idValue = document.querySelectorAll('tr');
for (i = 0; i < idValue.length; i++) {
if (idValue[i].id.includes("id4")) {
idValue[i].style.display = "block";
} else {
idValue[i].style.display = "none"
}
}
<table id="categoriesTable">
<tr id=row_id1_dynamicdata>
<td>row1</td>
<td>..</td>
</tr>
<tr id=row_id2_dynamicdata>
<td>row2</td>
<td>..</td>
</tr>
<tr id=row_id3_dynamicdata>
<td>row3</td>
<td>..</td>
</tr>
<tr id=row_id4_dynamicdata>
<td>row 4</td>
<td>..</td>
</tr>
<tr id=anotherrow_id4_dynamicdata>
<td>another row with id4</td>
<td>..</td>
</tr>
</table>
You can use document.getElementsByTagName to get all id contain id4.
Then, just to hide them.
let ElementArray = Array.prototype.filter.call(document.getElementsByTagName('tr'), element => element.id.match('id4'));
let idArray = ElementArray.forEach(element => document.getElementById(element.id).style.display="none");
You can simply use:
$('#categoriesTable tr').not('[id^="row_id4_"]').hide();
I am trying to highlight a row, when it's within a specific time range.
So actually let's say its 10:00:00 and i need to mark the row, if the time is between the start end the enddate-row.
the table:
<table class="table table-striped" id="timeTable">
<thead>
<th>Title</th>
<th>Start</th>
<th>End</th>
<th>Channel</th>
</thead>
<tbody>
<tr>
<td>Title 1</td>
<td class="dateRowStart">2016-08-10 09:00:00+02</td>
<td class="dateRowEnd">2016-08-10 11:00:00+02</td>
<td>Channel 1</td>
</tr>
<tr>
<td>Title 2</td>
<td class="dateRowStart">2016-08-10 09:30:00+02</td>
<td class="dateRowEnd">2016-08-10 12:00:00+02</td>
<td>Channel 3</td>
</tr>
<tr>
<td>Title 4</td>
<td class="dateRowStart">2016-08-10 13:00:00+02</td>
<td class="dateRowEnd">2016-08-10 15:00:00+02</td>
<td>Channel 4</td>
</tr>
</tbody>
</table>
The dateformat is the output of my postgresql db. It would be great if I could show them in our local time format (10.08.2016 - 14:15:12) but thats not my main issue here.
my (only half complete) js code to highlight:
<script>
$('#timeTable .dateRowStart').each(function () {
var dtTd = new Date($(this).html());
var dtNew = new Date();
if (dtNew.getTime() < dtTd.getTime()) {
$(this).parent('tr').addClass('highlight');
}
});
</script>
I don't know how to include dateRowEnd to check, if the date is still between the start/end-time. If I'm using two identical time/dates with dateformat eg. "08/10/2016 10:05:00", I'm only getting one row marked., that's the other annoying thing.
Thank you!
You could add a class to the <tr> tags themselves and then do:
HTML:
<tbody>
<tr class="dateRow">
<td>Title 1</td>
<td class="dateRowStart">2016-08-10 09:00:00+02</td>
<td class="dateRowEnd">2016-08-10 11:00:00+02</td>
<td>Channel 1</td>
</tr>
...
</tbody>
jQuery:
$('#timeTable').find('.dateRow').each(function () {
var dtStart = new Date($(this).find(".dateRowStart").text());
var dtEnd = new Date($(this).find(".dateRowEnd").text());
var dtNew = new Date();
if (dtNew >= dtStart && dtNew <= dtEnd) {
$(this).addClass('highlight');
}
});
Note you only have to use .getTime() if you're doing ==, !=, ===, and !== on Date objects as seen here.
Edit: As #MarkSchultheiss suggested, separating $('#timeTable .dateRow') into $('#timeTable').find('.dateRow') has a slight efficiency boost.
With moment.js you can do --
$('#timeTable .dateRow').each(function () {
var startTime = $(this).closest("tr").find(".dateRowStart") .text();
var endTime = $(this).closest("tr").find(".dateRowEnd").text();
if (moment().isBetween(startTime, endTime)) {
$(this).addClass('highlight');
}
});
codepen -- http://codepen.io/anon/pen/OXAEAv
You can also change the date format with moment('orig date').format('MM/DD/YY HH:mm:ss')
Check this snippet:
$(function() {
$('#timeTable .dateRowStart').each(function() {
var dtTdStart = new Date($(this).text());
var dtTdEnd = new Date($($(this).siblings('.dateRowEnd')).text());
var dtNew = new Date();
if (dtNew > dtTdStart && dtNew < dtTdEnd) {
$(this).parent('tr').addClass('highlight');
}
else{
$(this).parent('tr').removeClass('highlight');
}
});
});
.highlight {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="timeTable">
<thead>
<th>Title</th>
<th>Start</th>
<th>End</th>
<th>Channel</th>
</thead>
<tbody>
<tr>
<td>Title 1</td>
<td class="dateRowStart">2016-08-11 17:00:00+02</td>
<td class="dateRowEnd">2016-08-11 19:00:00+02</td>
<td>Channel 1</td>
</tr>
<tr class="highlight">
<td>Title 2</td>
<td class="dateRowStart">2016-08-11 17:30:00+02</td>
<td class="dateRowEnd">2016-08-11 18:00:00+02</td>
<td>Channel 3</td>
</tr>
<tr>
<td>Title 4</td>
<td class="dateRowStart">2016-08-11 13:00:00+02</td>
<td class="dateRowEnd">2016-08-11 15:00:00+02</td>
<td>Channel 4</td>
</tr>
</tbody>
The idea is to move a particular table row to a different location
HTML
<table id="grid1" class="table table-zebra">
<tbody>
<tr>
<td>Cont 1 tr 1</td>
</tr>
<tr>
<td>Cont 2 tr 2</td>
</tr>
<tr>
<td>Cont 3 tr 3</td>
</tr>
<tr>
<td>Cont 4 tr 4</td>
</tr>
<tr>
<td>Cont 5 tr 5</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 6 tr 6</td>
</tr>
<tr>
<td>Cont 7 tr 7</td>
</tr>
<tr>
<td>Cont 8 tr 8</td>
</tr>
<tr>
<td>Cont 9 tr 9</td>
</tr>
<tr>
<td>Cont 10 tr 10</td>
</tr>
<tr>
<td>Cont 11 tr 11</td>
</tr>
<tr>
<td>Cont 12 tr 12</td>
</tr>
<tr>
<td>Cont 13 tr 13</td>
</tr>
<tr>
<td>Cont 14 tr 14</td>
</tr>
</tbody>
</table>
That is the basic table, now, how do I can I move the TR 11 in a away that it will be under TR 4, I'm sorry that I don't post any JS but I have no idea how to do it... I was looking at this JSbin which is nice but can't use it..
Move the 11th tr to under the 4th:
$("tbody tr:nth-child(11)").insertAfter("tbody tr:nth-child(4)");
Working demo
If you prefer vanilla, you need the selectors the other way around.
document.querySelector("tbody tr:nth-child(4)").insertAdjacentElement("afterend", document.querySelector("tbody tr:nth-child(11)"));
In the context of an HTML table with rows that look like this:
<tr class="form-grid-view-row">
<td>
<a class="up" href="#">⇑</a>
</td>
<td>
<a class="down" href="#">⇓</a>
</td>
<td>
<span id="index1" class="form-label">1</span>
</td>
<td>
<span id="span1" class="form-label">Value 1</span>
</td>
</tr>
And this script:
$('.up,.down').click(function () {
var row = $(this).parents('tr:first');
if ($(this).is('.up')) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
$('.up,.down').click(function () {
This is selecting every DOM element with the class "up" and every element with the class "down", e.g. $('.up,.down').click(function () {. The function sets up a click handler for each element.
var row = $(this).parents('tr:first');
$(this) refers to the DOM element which is the target of the click handler (one of the "up" or "down" elements which was selected above). .parents() looks for tr:first, the first <tr> element starting with <a> and travelling up the DOM. It'll end up selecting the entire row.
if ($(this).is('.up')) {
This is checking to see whether or not the element selected has the class "up" or not.
row.insertBefore(row.prev());
This takes the row that was clicked, and moves it right above the upper-most sibling of the row that was clicked.
The jQuery methods used (insertBefore, prev, is, parents, etc.) are described in greater detail in the jQuery documentation.
You can do it by using JQuery Library.
// selecting tbody is bad instead you need to give an id or class to this tag and select according to this
var fourth = $( "tbody tr:nth-child(4)" ),
eleventh = $( "tbody tr:nth-child(11)" );
$( "tbody tr:nth-child(11)" ).insertAfter(fourth);
In order to move dynamically your elements you can add an event to all tbody children. What I basically do is select one element on first click then I move it after second element clicked.
$(document).on("ready", function () {
var $tbody = $("#grid");
var selected = null;
$tbody.children().on("click", function () {
if (selected == null)
selected = this;
else
{
$(selected).insertAfter(this);
selected = null;
}
});
});
It move after an element but is just an idea, you can customize it.
Your html should be like this.
<table>
<tbody id="grid">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
</tbody>
</table>
I am not so good in English, to express myself, so I show it with examples to you!
Here is my HTML table with code:
<table border="1">
<tr id="tr1_1">
<td rowspan="2">1</td>
<td>tr1.1 td2</td>
<td>tr1.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr1_2">
<td>tr1.2 td2</td>
<td>td1.2 td3</td>
</tr>
<tr id="tr2_1">
<td rowspan="2">2</td>
<td>tr2.1 td2</td>
<td>tr2.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr2_2">
<td>tr2.2 td2</td>
<td>td2.2 td3</td>
</tr>
</table>
(You can see the result here)
For example, if I click on the second two rows' "up" link, the result should be this:
<table border="1">
<tr id="tr2_1">
<td rowspan="2">2</td>
<td>tr2.1 td2</td>
<td>tr2.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr2_2">
<td>tr2.2 td2</td>
<td>td2.2 td3</td>
</tr>
<tr id="tr1_1">
<td rowspan="2">1</td>
<td>tr1.1 td2</td>
<td>tr1.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr1_2">
<td>tr1.2 td2</td>
<td>td1.2 td3</td>
</tr>
</table>
(You can see the final result here)
So how could I do this? I know the prev() and before() methods in javascript, but it merge only 1 row with 1 row, but I want to merge 2 rows WITH 2 rows!
I hope, someone can help me! Thank you!
Try this jQuery code :
$('.up').click(function() {
tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
tr.insertBefore(tr.eq(0).prev().prev())
return false;
})
$('.down').click(function() {
tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
tr.insertAfter(tr.eq(1).next().next())
return false;
})
And have a look to your fiddle edited : http://jsfiddle.net/lulu3030/UQz8u/6/
Just some explanations :
closest('tr') method find the nearest parent which has a tr tag
slice(0, 3) get the first 3 characters of a string
=> variable tr selects all elements which has the same 3 first id characters
insertBefore and insertAfter methods allows to move selected elements
Could be done like that too:
DEMO
$(function () {
$('.up, .down').on('click', function () {
var $tr = $(this).closest('tr'),
$flag = $('<tr/>').insertBefore($tr),
$rows = $tr.add($tr.next('tr')).detach()
methods = $(this).is('.up') ? ['insertBefore', 'prevAll'] : ['insertAfter', 'nextAll'];
if ($flag[methods[1]]('tr').eq(1).length) {
$rows[methods[0]]($flag[methods[1]]('tr').eq(1));
$flag.remove();
} else $flag.replaceWith($rows);
});
});
Is it possible to loop through a list of table cells and check if any has a particular event (for example click), and then execute the callback function?
You can use a td selector and the each method to loop and use the events data to get at the events you are looking for:
$("td").each(function ()
{
//Do you work here
});
So, for the following HTML:
<table id="t1">
<tr> <td id="t1A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
<table id="t2">
<tr> <td id="t2A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
You can use the following:
$("#t1A").click(function () {
alert("t1A click event");
});
$("td").each(function () {
var events = $._data(this, "events")
if (!events) return;
var clickEvents = events.click;
if (!clickEvents) return;
if (clickEvents.length > 0) {
alert($(this).attr("id") + " has a click event");
$(this).click(); // Execute the click if you so desire.
}
});
See this example fiddle: http://jsfiddle.net/sdnr6/1/