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;');
Related
I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.
For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/
You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>
https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.
If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)
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>
<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'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?
Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO
Use .siblings() in jquery
$(this).siblings('th.aco').text();
$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().
I have a dynamic table calendar that displays a row of "No Events Today" when there are no events for that day.
I'm trying to remove the TR for this particular content INCLUDING the TR immediately above it, however only when the particular TR displays "No Events Today".
This is the jQuery I came up with so far that half works, since it removes the content, but I need your help with the removing the date, too.
$("tr td:contains('No events today')").parent().remove();
My Demo
This is stripped down example of the table:
<table>
<tr>
<td class="CalendarEventDate" colspan="3">Saturday, March 1 2014</td>
</tr>
<tr>
<td class="CalendarNoEvent" colspan="3">No events today</td>
</tr>
<tr>
<td class="CalendarEventDate" colspan="3">Sunday, March 2 2014</td>
</tr>
<tr>
<td class="CalendarEventTime">All Day</td>
<td class="CalendarEventName">Event Name Here</td>
<td class="CalendarEventLocation">Remote</td>
</tr>
</table>
$("tr td:contains('No events today')").parent().hide().prev('tr').hide()
You want to remove the previous sibling of the tr-element which encapsulates the td-element with "No events today" as well.
jQuery provides the .prev() function.
Something like this shoudl work:
$("tr td:contains('No events today')").parent().prev().remove();
I think you are looking for jQuery.prev. See the following example.
//Find the first td.
var tr = $("tr td:contains('No events today')").parent();
//Find the previous element and remove it from the DOM.
tr.prev().remove();//Could be written tr.prev(".CalendarEventDate").remove();
//No remove the first td from the DOM.
tr.remove();