I have a table like this:
<table>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
</table>
I want to use JQuery to install a click handler on the delete buttons such that it deletes the current row when clicked
Give a class of, for example, "delete" to the delete buttons, then use this:
$("button.delete").click(function() {
$(this).closest("tr").remove();
});
Alternatively, if you can't add the class, you can use the :contains selector:
$("button:contains('delete')").click(function() {
$(this).closest("tr").remove();
});
Update (now that the code in the question has completely changed)
Now that you have changed the code in the question to contain only one button instead of two, you don't need to bother adding the class, or using the :contains selector, you can just use the plain old button selector:
$("button").click(function() {
$(this).closest("tr").remove();
});
Try this. As a side not you should not have same id to any dom element on the page.
$("button").click(function() {
$(this).closest("tr").remove();
});
In your markup the tags are not closed properly. E.g the button tag is not closed properly so the selector will not work. Give a unique id or a class name to select the required buttons.
Something like this
<tr>
<td>foo</td>
<td>Some content</td>
<td><input type="button" class="delete" value="Delete" /></td>
</tr>
Using delegate to attach event handler only to table for better performance. This way the click event will be attached only to the table element no matter how many rows it has.
$("table").delegate("input.delete", "click", function() {
$(this).closest("tr").remove();
});
You can try soemthing like this:
<table>
<tr>
<td>row 1, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
</table>
And your jQuery:
$('table td img.delete').click(function(){
$(this).parent().parent().remove();
});
First off, there's a syntax error in your HTML, and you should a class identifier for easier access to those buttons:
<table>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
</table>
Next, here's the jQuery code you need:
$(function() {
$('button.delete').click(function(event) {
event.preventDefault();
$(this).closest('tr').remove();
});
});
Related
Is there a way to check for the last double clicked element with jQuery. I've made
a table and I want to know how to identify the most recent double clicked <td></td> in my code. I tired something like this:
var clickedTD = $("td").dblclick;
But It didn't work.
element.dblclick() should work provided the DOM is loaded... See the example below...
$(document).ready(function() {
//set up dblclick event on the table data elements
$("td").dblclick(function(){
//$(this) use key word this for the element clicked
$("#display").text(`You double clicked: ${$(this).text()}`)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Click 1</td>
<td>Click 2</td>
<td>Click 3</td>
<td>Click 4</td>
</tr>
</table>
<div id="display"></div>
I don't really think jQuery is necessary for this:
<td>onclick="checkClick(this)"></td>
function checkClick(clickedElement) {
var clickCount= clickCount + 1;
if(clickCount === 2){
console.log(clickedElement);//Last clickedclicked
}
}
I've been trying to figure this out, but am not sure in which way to approach it using jQuery. I have a table of classes, and according to the classes that are checked, I want to change the background of tbody to reflect that this requirements are met.
<tbody>
<tr class="active header">
<th colspan="5"><b>Math (3 Courses)</b></th>
</tr>
<tr>
<td>MAC2311</td>
<td>Calculus I w/ Analytic Geometry</td>
<td>4</td>
<td></td>
<td><input type="checkbox" name="math" value="MAC2311"></td>
</tr>
<tr>
<td>MAC2312</td>
<td>Calculus II w/ Analytic Geometry</td>
<td>4</td>
<td>MAC2311 or MAC2281</td>
<td><input type="checkbox" name="math"value="MAC2312"></td>
</tr>
<tr>
<td>MAC2281</td>
<td>Calculus for Engineers I</td>
<td>4</td>
<td></td>
<td><input type="checkbox" name="math" value="MAC2281"></td>
</tr>
<tr>
<td>MAC2282</td>
<td>Calculus for Engineers II</td>
<td>4</td>
<td>MAC2311 or MAC2281</td>
<td><input type="checkbox" name="math" value="MAC2282"></td>
</tr>
<tr>
<td>Math Elective</td>
<td>(Math Elective)</td>
<td>4</td>
<td>MAC2312 or MAC2282</td>
<td><input type="checkbox" name="math" value="math_elective"></td>
</tr>
</tbody>
so, for example, if MAC2311, MAC2312, and math_elective are checked, tbody's background color can change green to signify completion of the section.
You can select all of the checked inputs with the :checked selector:
$("input[type=checkbox]:checked")
To see if any of the checkboxes are checked:
var isAtLeastOneChecked = ($("input[type=checkbox]:checked").length > 0);
if (isAtLeastOneChecked) {
// color your tbody
}
You can use the change handler like
.selected {
background-color: green;
}
then
jQuery(function ($) {
$('input[name="math"]').change(function () {
var $tbody = $(this).closest('tbody');
$tbody.toggleClass('selected', $tbody.find('input[name="math"]:checked').length == 3)
})
})
Demo: Fiddle
Here we adds the class selected to the tbody if there is 3 checked checkboxes
$(document).ready(function(){
$("#youTableId input").click(function () {
//Now $(this) will point to the element that has raised the event
and you can do something like this
alert($(this).is(':checked'));
//Now you now $(this) is the element that raised the event.
//You can get all the attributes of the element like name, id value, whether its check or not etc by using attr() function.
$(this).attr("value");
});
}
You probably want to assign ID's to your input and td elements.
var MAC2311 = document.getElementById('idOfThatInput');
var 2311td = document.getElementById('idOftd');
if (MAC2311.checked)
("#2311td").css("background", "green");
or use an Array containing the elements desired to be checked, and do the comparison in a for loop instead of individually.
I have a Datatables Table with some random values in it. I would like to create a popup when the client clicks on the TR itself, but NOT on the first and the last TD of the table.
<table class="table href="#popup">
<tr id="tr1">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr2">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr3">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr4">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
</table>
My popup plugin works like, if an href link is called and the popup div's id equals to that href value, it automatically pops up.
However if someone clicks on the first or the last TD do NOT want the popup to activate. Is it actually possible to achieve this somehow?
(The following solution should not be mentioned, because it would make the code look like a mess literally: if I select all the TD fields without the first and last, and add a href attribute to all of the selected TD elements.)
Any other suggestions are welcomed!
When you click, the event is propagated from the child nodes to the parent nodes (learn more here).
You can disable event propagation in both td:first-child and td:last-child elements inside your table in order to prevent your tr event handler from being reached.
I'd also suggest you to use event delegation to keep better performance.
$('.table').on('click', 'tr', function() {
alert('show popup');
});
$('.table').on('click', 'td:first-child, td:last-child', function(e) {
e.stopPropagation();
});
FIDDLE: http://jsfiddle.net/6QTrL/1/
Just use this:
Using :first-child and :last-child with not()
$('table tbody tr td').not(":first-child").not(":last-child").click(function(
//This will only be triggered on the td that are not the first or the last on a tr
))
Here's a fiddle to accomplish that - First and Last row now clickable
I have the first and last row throwing an alert but that's just to give you an idea of how to target them.
$(function(){
var tableRows = $('table').find('tr');
$('table').on('click', 'tr', function(){
if (this == tableRows[0])
alert('first row');
else if (this == tableRows[tableRows.length - 1])
alert('last row');
else
alert('somewhere in the middle');
});
});
The code below is probably more along the lines of what you're looking for. I made the code above in the fiddle so I just pasted that as well.
$(function(){
var tableRows = $('table').find('tr');
$('table').on('click', 'tr', function(){
if (this != tableRows[0] && this == tableRows[tableRows.length - 1])
alert('somewhere in the middle');
});
});
I have a table; when I click on a tr I need to change the class of the first td in that; for some reason I need to use onclick! I dont know how to pass the first td of the clicked tr or if I pass the clicked tr>I dont know how to change the class of the first td of that class;
I have tried the following which is not woking; could you please help me in this regard?
JSFIDDLE: http://jsfiddle.net/web_developer_888/8RF5r/2/
<table>
<tr onclick="myFunction(this.id)">
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr onclick="myFunction(this.id)">
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr onclick="myFunction(this.id)">
<td></td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
function myFunction(id)
{
if (id.hasClass('checked')) {
id..siblings(":first").addClass('checked');
} else {
id.siblings(":first").removeClass('checked');
}
}
PS: I know my code is not right; I just need your help; I dont know how to pass the first td of the clciked tr or how to get the first td or the clicked tr if I pass the clicked tr
you are passing the id, which would be a string so there would be no hasClass function for it. Just pass this, than wrap it in the function, also you can just toggle the class with toggleClass
<tr onclick="myFunction(this)">
<td></td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
JS
function myFunction(element){
$(element).find("td:first").toggleClass("checked");
}
JSFiddle
Though it would probably be easier to just set a listener instead of using attribute onclick
$("tr").click(function(){
$(this).find("td:first").toggleClass("checked");
});
OR
function myFunction(){
$(this).find("td:first").toggleClass("checked");
}
$("tr").click(myFunction);
In both cases the keyword this will be a reference to the clicked element. From there you just use the correct selector to select the first td then toggle the class.
Since you have jQuery as a tag to this question, I assume you are ok using jQuery. In that case you can attach a click listener to your row, find the first td child of that row and change the class.
$(document).on('click', 'tr', function() {
var myTD = $(this).find("td:first");
if(myTD.hasClass('checked')) {
myTD.addClass('checked');
} else {
myTD.removeClass('checked');
}
});
I have the html like below:
<table class="table" id="subscriptions">
<tbody id="subscriptions-tbody">
<tr>
<td>Item 1</td>
<td>delete</td>
</tr>
<tr>
<td>Item 2</td>
<td>delete</td>
</tr>
<tr>
<td>Item 3</td>
<td>delete</td>
</tr>
</tbody>
</table>
Items can be added dynamically there.
Now, I should create the function, which will help me to delete the element from the list, if user clicks delete.
Looks like I should:
assign some unique id for each item in the list (I have such ids) - where should I keep them? part as href?;
once user clicks on the link, I should prevent default action and pass control to my function (it will hide the element from the list and will sent POST request to the server) with item id as parameter.
How to do it?
This is the perfect case for event delegation. Hook the event on the table or tbody, but ask jQuery to trigger it only if it happens on your delete link, like this:
$("#subscriptions-tbody").delegate("a", "click", function(event) {
var row = $(this).closest('tr');
// ...delete the row
return false; // Don't try to follow the link
});
Live Example | Source
Because the event is hooked on the table or tbody, adding and removing rows doesn't matter, because the event is handled at the table or tbody level.
In the above, I'm using delegate because I like how explicit is is. With jQuery 1.7 or higher, you can use the way-too-overloaded-on function instead:
$("#subscriptions-tbody").on("click", "a", function(event) {
var row = $(this).closest('tr');
// ...delete the row
return false; // Don't try to follow the link
});
Live Example | Source
Note that the order of arguments is slightly different.
You should keep the information required for the server side (like the id) on the tr with data- attributes, and use .on() to handle the events from the table..
html
<table class="table" id="subscriptions">
<tbody id="subscriptions-tbody">
<tr data-id="3">
<td>Item 1</td>
<td>delete</td>
</tr>
<tr data-id="5">
<td>Item 2</td>
<td>delete</td>
</tr>
<tr data-id="6">
<td>Item 3</td>
<td>delete</td>
</tr>
</tbody>
</table>
script
$("#subscriptions").on("click", "a.delete", function(e) {
e.preventDefault();
var row = $(this).closest('tr'),
relatedId = row.data('id');
$.post(...); // use relatedId here
row.fadeOut(500, function(){
row.remove();
})
});
Try this:
<table class="table" id="subscriptions">
<tbody id="subscriptions-tbody">
<tr data-id="1">
<td>Item 1</td>
<td>delete</td>
</tr>
<tr data-id="2">
<td>Item 2</td>
<td>delete</td>
</tr>
<tr data-id="3">
<td>Item 3</td>
<td>delete</td>
</tr>
</tbody>
</table>
You will name a class for your delete anchors, let's say class="delete", and you will place data-id attribute to the table row in order to unique identify each item and know what id to send to the server.
Now your js might look like this:
$("#subscriptions-tbody").on('click', 'a.delete', function(e){
var tr = $(e.currentTarget).closest('tr');
//get the id
var id = tr.attr("data-id");
//make ajax request
$.ajax({
url: 'script.php',
data: id,
success: function(data) {
//hide the item or remove
tr.remove(); // tr.hide();
// ajax callback
}
});
});
You can store the ID as a data- attribute on either the control or the row. Delegate the click handler to the table itleslf to account for dynamically added elements that don't exist when code is run using on() method.
HTML:
<!-- class added to element -->
delete
JS
$('#subscriptions').on('click', '.delete-btn',function(evt){
evt.preventDefault();
var id=$(this).data('id'), $row=$(this).closest('tr');
/* send data to server and remove row on success*/
$.post('serverUrl.php', { rowID: id, action :'delete'}, function(){
$row.remove();
})
})