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/
Related
Is it possible to examine the content within a tr, AFTER an html element (br) to see if any exists? If there is no content after the br element, I'd like to hide the parent td. Please note that the html code is system generated and I cannot edit it.
I'm just not sure where to begin with this. Any help is greatly appreciated.
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try using .each() , nextSibling , nodeValue , String.prototype.match() , .closest()
$("table tr td br").each(function(i, el) {
// if `br` next sibling does not contain alphanumeric characters,
// hide parent `tr` element
if (el.nextSibling.nodeType === 3
&& el.nextSibling.nodeValue.match(/\w+/) === null
|| $(el).next(":empty").length) {
$(this).closest("tr").hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br><span></span>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Yes, you just get the trs, then find out if the first <br> element inside the first <td> has any following element siblings (I'm making an assumption there, that you don't want those hidden), or any following text node siblings that aren't blank. jQuery's contents is handy for that, as it includes text nodes. I'd probably loop through them backward:
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
I expect that can be optimized, but you get the idea.
Live Example:
var counter = 3;
tick();
function tick() {
$("#countdown").text(counter--);
if (counter < 0) {
hideIt();
} else {
setTimeout(tick, 500);
}
}
function hideIt() {
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
}
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr>
<!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown"> </div>
I want to hide all of the <tr> where td's text is 0. How can I do that? I have to mention that in reality i have more than 600 rows. But the example below is a demo. THX
<table id ="list2">
<tbody>
<tr>
<td>2</td>
<td>213</td>
<td id ="hideRow">0</td>
<tr>
<tr>
<td>vb</td>
<td>asf</td>
<td id ="hideRow">0</td>
<tr>
<tr>
<td>cxvb</td>
<td>xcvb</td>
<td id ="hideRow">2</td>
<tr>
<tr>
<td>cas</td>
<td>asdf</td>
<td id ="hideRow">45</td>
<tr>
</tbody>
</table>
This is my try :| . The event is loaded by onclick event
$('#list2').find("tr td #hideRow").each(function(){
var txt2 = $(this).text();
if (txt2 =="0"){
$('#list2').find("tr").each(function(){
$(this).hide();
});
}
})
First of all do not use id for duplicate names. Try doing it like following.
<table id ="list2">
<tbody>
<tr>
<td>2</td>
<td>213</td>
<td class="hideRow">0</td>
<tr>
<tr>
<td>vb</td>
<td>asf</td>
<td class="hideRow">0</td>
<tr>
<tr>
<td>cxvb</td>
<td>xcvb</td>
<td class="hideRow">2</td>
<tr>
<tr>
<td>cas</td>
<td>asdf</td>
<td class="hideRow">45</td>
<tr>
</tbody>
</table>
$('#list2').find(".hideRow").each(function(){
var txt2 = $(this).text();
if (txt2 =="0"){
$(this).parent().hide();
}
})
IDs on elements need to be unique, you can't have multiple <td id="hideRow"> elements and expect things to play nicely all of the time. I'd suggest changing it to a class. Then, select all elements:
var elems = $('span.hideRow');
Filter to those whose text is 0:
elems = elems.filter(function() {
return $(this).text() === "0";
});
Get their parent <tr> element:
elems = elems.closest('tr');
Then, finally, hide them:
elems.hide();
That can, obviously, all be done in one line:
$('span.hideRow').filter(function() {return $(this).text() === "0";}).closest('tr').hide();
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);
});
});
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 have a table like this:
<table class="thisTable">
<tr>
<td class="firstColumn">First</td>
<td>Apple</td>
<td>Ant</td>
</tr>
<tr>
<td class="firstColumn">Second</td>
<td>Banana</td>
<td>Bear</td>
</tr>
<tr>
<td class="firstColumn">Third</td>
<td>Citrus</td>
<td>Cat</td>
</tr>
</table>
What I wanted to do is to be able to click the link in td.firstColumn even if I click on the other cells in the same row. How do I do this in Dojo? Thanks a lot!
Give the rows a unique class name, then query the domNode and add connect's to them with a loop.
var that = this;
dojo.query('rowClass', this.domNode).forEach(function (node, index, arr) {
dojo.connect(node, "onclick", function (evt) {
that.handleEvent(evt);
});
});