I have a table and the TDs have a class and based on that class I'm adding click events to it like this
$('#regRegionsTable').on('click', '.toggleDetail', toggleDetail);
I'm using on because the table appears, goes away, and returns, and so on, so I need to be able to add events to the table as it gets added to the DOM. In certain circumstances I need to disable the events for a specific row. I'm trying it like this, but it's not working.
$(row).off('click', '.toggleDetail');
row is the TR DOM node. So I'm trying to get all of the TDs in the row that have the toggleDetail class and turn off the click event binding.
This is an example that could be useful. I add the click event on each td. On certain circumstances (clicking on a button in my example) I disable the click event for all the td on a specific row (the first row) using unbind()
$('#regRegionsTable td.toggleDetail').on('click', toggleDetails);
function toggleDetails(){
console.log("click avvenuto")
}
$("button").on("click",function(){
$('#regRegionsTable tr:first-of-type td.toggleDetail').unbind('click', toggleDetails);
})
function toggleDetails(){
console.log("click avvenuto")
}
<table id="regRegionsTable" border="1">
<tr>
<td class="toggleDetail">1</td>
<td class="toggleDetail">2</td>
<td class="toggleDetail">3</td>
</tr>
<tr>
<td class="toggleDetail">4</td>
<td class="toggleDetail">5</td>
<td class="toggleDetail">6</td>
</tr>
</table>
<button>Remove event on a specific tr</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I have code like this:
<table>
<tr>
<td>Cel1
<td>Cel2
<tr>
<tr>
<td>Cel3
<td>Cel4
<tr>
</table>
How can I disable event jQuery? I tried this method:
cell.setAttribute("disabled","true")
$('td').unbind();
Will unbind all events on td elements.
Given your example HTML:
<table>
<tr>
<td>Cel1</td>
<td>Cel2</td>
</tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
</tr>
</table>
If you want to disable a given cell using jQuery, you'll need to do two things.
First, you'll need to select a cell. You can do this without changing the markup by using the :nth-child(), for instance - but to make it simple, let's add a class to the cell you want to disable:
<table>
<tr>
<td class="my-cell">Cel1</td>
<td>Cel2</td>
<tr>
<tr>
<td>Cel3</td>
<td>Cel4</td>
<tr>
</table>
Now, we can select the cell using jQuery as follows:
var cell = $('.my-cell');
To unbind event handlers from the element
From here, if you want to remove all events which are assigned to the element, you can use jQuery's .unbind() as Sofiene mentioned:
cell.unbind();
To hide the cell in the table
If you'd like to remove the cell from the table by setting CSS attributes, this can be done by setting the style attribute using jQuery's .attr(), for instance:
cell.attr('style', 'visibility: hidden;');
I am wondering if there is any code, dll that allows developer to give effects to server control from code behind. I have a empty div and two TextBoxes to select dates in kinda leave application form. When user select two values say 11-Oct-2014 and 14-Oct-2014 in those TextBoxes then I want to append html table markup to that empty div and it will consist number of tr equal to days of leave. I am doing it in AJAX UpdatePanel and and showing that on form. It's working fine but I want to know what if I want to use Jquery like FadeIn and FadeOut effect after appending table markup to div, is it possible?
This is very generic, but you can adapt it to suit...
http://jsfiddle.net/dv9a0ubw/1/
html
<button id="add-row">add a row</button>
<br />
<br />
<table id="my-table">
<tr>
<td>something 1</td>
<td>something 2</td>
<td>something 3</td>
</tr>
</table>
javascript
$("#my-table").on("DOMSubtreeModified", function() {
$(this).find("tr:last").hide().fadeIn(2000);
});
$("#add-row").on("click", function() {
var $row = $("<tr><td>new 1</td><td>new 2</td><td>new 3</td></tr>");
$("#my-table").append($row);
});
As you can see, the button simply adds a row and that's it. The animation is applied by the event handler detecting a change in the table. You can retro-fit this to any table by modifying the table selector, using a class if you mean to use it in multiple instances.
<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.
You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()
$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});
usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()
i have one table, in that i have 2 columns one is files & and another permissions.
for all table rows i have refresh buttons.
What i need is when i click the refresh button it should only refresh the columns of the same row,where the refresh button is.
but now it is refreshing the particular row and particular column, but when i change the values in database and click refresh, the changed value is not getting updated...
here is my code:
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
$("#buton").click(function(){
$(this).parent().siblings(".b1").load(".b1");
$(this).parent().siblings(".b2").load(".b2");
});
});
</script>
jsp code:
<table border="1">
<tr>
<td class = "b1"><s:property value="%{#u.files}" /></td>
<td class = "b2"><s:property value="%{#u.perm}" /></td>
<td><img src="images/refresh.png" title="Refresh" id="buton"></td>
</tr>
</table>
The $(this) in your button click function is the <img> element (which isn't closed by the way). The parent, which you call by $(this).parent() of that element is the <a> element, not the <td>. So you're searching for siblings of that <a> element instead of the <td> element.
I've built a jQuery selector for a function which looks like this:
$('html').not('.table-main tr[selected]').mousedown( function( e ) {
But somehow it is not filtering at all and i do not quite understand why.
Even if i just leave ('.table-main') for the selector i still trigger the function when clicking into the table... What is wrong with that?
Using document or 'body' instead of 'html' does not help, as document is not triggering at all with .not() and 'body' results in the same.
Edit:
Just tried using another block outside of the table and it works. Is there a chance i cannot use this on tables?
Update2: As requested, here is the rendered html code of the table:
<table border="0" cellspacing="2px" cellpadding="5px" class="table-main">
<tr id="tablefields">
<th style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr><th><div class="tr-head-get" id="tr-get-0">Name</div></th></tr>
<tr><th><div class="th-header" id="th-header-0" style="top: 54px;">Name</div></th></tr>
</table>
</th>
<th style="padding: 0;"></th>
</tr>
<tr id='table_form_new_device' class='table_form_class'>
<form accept-charset="UTF-8" action="/devices" class="new_device" data-remote="true" id="new_device" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="T2dSeZpxxvgJdTP+yoE7BrVODzqJ95gyVu9Wh/v7oP8=" /></div>
<th class='tablefield'>
<input id="device_devicename" name="device[devicename]" size="10" type="text" />
</th>
<th>
<div class='submitbox' id='submitbox_new_device'>S</div>
<script>
$('#submitbox_new_device').click(function (event) {
$('#new_device').submit();
});
</script>
</th>
</form></tr>
</table>
<div class="dropdown-button" style="margin: 0 2px;">Filter</div>
You really, really want to use delegated event handling for this because you don't want to attach an event handler to every single element in the document. You want to intercept bubbled events at the document level and just check if the mousedown came from an element that was not a selected row in your table.
In addition the tr[selected] seems unlikely to work. I think you need to add a class "selected" to the selected row and then use tr.selected as the selector.
If you make that change, I'd suggest something like one of these two options:
$(document).mousedown(function(e) {
if (!$(e.target).is('.table-main tr.selected')) {
// mouse down and it wasn't in a selected row of your table)
}
})
You may also be able to let jQuery delegation do more of the work:
$(document).on('mousedown', ':not(.table-main tr.selected)', function() {
// mouse down and it wasn't in a selected row of your table)
});
After seeing your actual HTML, if I understand the problem correctly, this should work. This will give you an event anytime a click happens as long as that click is not in a row of table-main that has the selected class on it:
$(document).on('mousedown', function(e) {
// mouse down and it wasn't in a selected row of your table)
e.stopPropagation();
if (!$(e.target).closest(".table-main tr.selected").length) {
console.log("mousedown not in selected row of table-main")
}
});
Here's a demo: http://jsfiddle.net/jfriend00/5QD6N/
Using [selected] makes no sense on a element of type tr. You use selected for inputs(checkbox,radio). You can add a class .selected to the tr elements in .table-main and then use :
Edit: Like somebody posted above, you want to use select the elements nested inside the body.
$('body').find(':not(.selected)').mousedown(function(e){})
$('html') creates a jQuery object containing your HTML element.
.not('.table-main tr[selected]') removes any TR elements with a selected attribute (there is an error here, that attribute doesn't appear on TRs) that are descended from elements that are members of the table-main class. Since HTML elements are not TR elements and can't be descended from anything, this removes no elements and has no effects.
mousedown( function( e ) binds an event handler to the HTML element. Unless something stops propagation, any click will eventually bubble up to there.
I'm guessing (since you didn't actually say what you wanted to achieve) that you want to capture clicks on TR elements that aren't selected. Assuming that you switch to using classes to make the HTML valid…
$('.table-main tr:not(.selected)').mousedown(…);
and
<tr class="selected">