I have a table of buttons
<table>
<tr><input type="button" id="aaa1"></tr>
<tr><input type="button" id="aaa2"></tr>
etc
</table>
I would like capture when button is clicked, so I've written this code:
$('table').on('click', "[id^='aaa']", function(event){
$(this)....
});
I think the problem is that this code is repeated for all the buttons, but I just wanna capture the button that I click. Can anyone help me?
Try:
$("table input[type='button']").on('click', function(event) {
...
});
You code isn't working because you have no table cells inside your table rows.
I think the problem is that this code is repeated for all the buttons
This is not the case, the below example should show this.
I would continue using the deferred method you are currently using because it only adds one listener to the page instead of several for each of the buttons, however I would change it slightly to catch type=button, as shown below:
$('table').on('click', 'input[type="button"]', function(event) {
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="button" id="aaa1" value="B1" />
</td>
</tr>
<tr>
<td>
<input type="button" id="aaa2" value="B2" />
</td>
</tr>
</table>
Try this.
$(document).ready(function(){
$(".buttons").on("click",function(){
var value = $(this).attr("value");
alert(value + " is clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><input type="button" id="aaa1" value="button1" class="buttons"></tr>
<tr><input type="button" id="aaa2" value="button2" class="buttons"></tr>
etc
</table>
You can't directly add element inside tr.Use the td inside tr and add the element inside the tr
$(document).ready(function(){
$("table input[type='button']").click(function() {
alert('Button with id = "'+ this.id +'" is clicked');
console.log(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td><input type="button" id="aaa1"></td></tr>
<tr><td><input type="button" id="aaa2"></td></tr>
</table>
Related
i am using a table each row contains a check box while i submit i want unchecked row to be disabled this is how i tried i created a table and row which contain a input type checked if the input type unchecked means i want to disable that row so while i retrieve in mvc i can get the details
<table id="subjectTable">
<tbody><tr><input type='checkbox' name='subjectcheck' /></tr></tbody>
</table>
$("input:not(:checked)").each(function () {
$(this).closest('tr').attr("disabled", "true");
});
this how i tried can any one help
If you want to simply remove the <tr>, you can use the jQuery methods .closest() and .remove() :
Select your inputs with $('input:not(:checked)')
Find the closest <tr> with .closest('tr')
Remove them with .remove()
PS: Keep in mind you have to have a <td> inside your <tr>, otherwise your <input> will be placed outside of your <table>.
$('button').on('click', function(){
$('input:not(:checked)').closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr><td><input type='checkbox' name='subjectcheck' /></td></tr>
</tbody>
</table>
<button>Emulate submit !</button>
To remove the parent tr of unchecked tr try .parent() and .remove() like the following way:
$("input:not(:checked)").each(function () {
$(this).parent('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subjectTable">
<tbody>
<tr>
<input type='checkbox' name='subjectcheck'/>
</tr>
</tbody>
</table>
I am using a button in a table and my button is a single element but on top, I am changing the row of the table based on some condition, so when my final table created is I see button in all rows, which is fine and as per the requirement.
Now I need to use a function on button click which I want to perform the same action in each row to remove the row where the button is placed. when I am using a single function it's working only for first time and not after that, how can I use the same function for all buttons?
here is my code:
function AddValueinrow() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
row = document.getElementById("DEVFirstrow");
}
if(selectedValue=="dummy value2"){
row = document.getElementById("DEVSecondrow");
}
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry()" type="button" id="show" class="btn btn-primary">Release</button>';
}
function Releaseentry() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
$('#DEVmyTable > tr').eq(0).children('td').remove();
}
if(selectedValue=="dummy value 2"){
$('#DEVmyTable > tr').eq(1).children('td').remove();
}
}
}
Find the parent row by using .closest(), and remove it.
Note: Instead of using inline onclick calls, use event delegation to attach a single event handler to the container, and react to button clicks.
$('#table').on('click', 'button', function() {
$(this)
.closest('tr')
.children('td:not(:last-child)')
.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>td11</td><td>td12</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td21</td><td>td22</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td31</td><td>td32</td>
<td class="button">
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
</tbody>
</table>
I made the following example to describe my problem:
$("tr > td > #arm").on("click", function() {
$(this).parent().children("#arm").prop("disabled", true);
$(this).parent().children("#disarm").prop("disabled", false);
});
$("tr > td > #disarm").on("click", function() {
$(this).parent().children("#arm").prop("disabled", false);
$(this).parent().children("#disarm").prop("disabled", true);;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr>
<td>
<button id="arm" disabled>Arm</button>
</td>
<td>
<button id="disarm">Disarm</button>
</td>
</tr>
</table>
<script>
</script>
I have the above table with one row that contains 2 cells and a button in each cell. One of them is disabled so I made a script where when I press the second button it should enable the first one and disable the one which was clicked.
Disabling the button that was clicked work as I expected but I don't know why it doesn't enable the other button.
You're not selecting the right element. Your code is
$(this).parent().children("#disarm")
where $(this) is the #arm element, then parent() is the td cell.
So basically you're searching for a children element (#disarm) of that cell, that's why he can't find it
Try with this instead
$("tr > td > #arm").on("click", function() {
$(this).prop("disabled", true);
$(this).closest("tr").find("#disarm").prop("disabled", false);
});
$("tr > td > #disarm").on("click", function() {
$(this).closest("tr").find("#arm").prop("disabled", false);
$(this).prop("disabled", true);
});
Here it is a WORKING DEMO of your code :)
you need to use prev and next
$("tr > td > #arm").on("click", function() {
$(this).parent().children("#arm").prop("disabled", true);
$(this).parent().next().children("#disarm").prop("disabled", false);
});
$("tr > td > #disarm").on("click", function() {
$(this).parent().prev().children("#arm").prop("disabled", false);
$(this).parent().children("#disarm").prop("disabled", true);;
});
https://jsfiddle.net/hfr33exa/1/
Try to totatlly remove disable attribute from element. As far as I know not all browsers correctly works with disable="false"
you can add a class and then use prop function as below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<button id="arm" disabled class="test">Arm</button>
</td>
<td>
<button id="disarm" class="test">Disarm</button>
</td>
</tr>
</table>
<script>
$('.test').click(function(){
$(".test").prop('disabled', function () {
return ! $(this).prop('disabled');
});
});
</script>
</body>
</html>
DEMO
description: I have added a class test to all the buttons and then I used the prop function. So the button on which click event occurs is disabled and rest all are enabled
Here is the solution of your problem. Use removeAttr to remove disabled to the element.
<table>
<tr>
<td>
<button id="arm" disabled>Arm</button>
</td>
<td>
<button id="disarm">Disarm</button>
</td>
</tr>
</table>
<script>
$("tr > td > #arm").on("click", function() {
$("#arm").prop("disabled", true);
$("#disarm").removeAttr("disabled");
});
$("tr > td > #disarm").on("click", function() {
$("#arm").removeAttr("disabled");
$("#disarm").prop("disabled", true);;
});
</script>
here is a jsfiddle of a working example
There is no reason to select the parent when you click on the button.
$(this).parent().children("#arm").prop("disabled", true);
should just be
$(this).prop("disabled", false);
Now when you are trying to pick the other element you do this.
You pick the parent of the button
You look for the other button inside of that element.
The problem is the button is in a sibling of the parent. But there is no need to select the parents when you have the id. Just select it by its id to start, it will be faster.
$("table tbody").on("click", "button", function() {
var btn = $(this).prop("disabled", true);
var opposite = btn.attr("id") === "disarm" ? "#arm" : "#disarm";
$(opposite).prop("disabled", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button id="arm" disabled>Arm</button>
</td>
<td>
<button id="disarm">Disarm</button>
</td>
</tr>
</table>
I have a table as follows:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Remove">Remove</a>
</td>
</tr>
</table>
And I have a hyperlink:
<a class="Clone">Add</a>
What I need to do is to add the <tr class="Sample"> into the table each time I click on the
<a class="Clone">
and remove a row when I click on the <a class="Remove"> corresponding to that row.
I tried as follows :
<script>
$(document).ready(function(){
$('.Clone').click(function(){
$('#shipping').append('.Sample');
});
});
</script>
But on clicking the hyperlink the text ".sample" gets written into the table. How can I do it ?
Try:
$('a.Clone').click(function () {
$('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
$(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td> <a class="Remove">Remove</a>
</td>
</tr>
</table> <a class="Clone">Add</a>
The first part clones the input and appends it to the table. The second part handles removing the rows (leaving the top row).
When add button is clicked call this function:
function myAddFunction(){
var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
$('#shipping').append(html);
}
When remove button is clicked call this function:
function myRemoveFuncion(){
$(this).closest('tr').remove();
}
Hopre it helps.
I've just wrote a script for you
$( document ).ready(function() {
$(".Remove").on("click", function() {
$(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});
});
try this fiddle
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#shipping').on('click', 'a.Clone', function(e){
e.preventDefault();
$('table#shipping').append( $(this).closest('tr').clone() );
});
$('#shipping').on('click', 'a.Remove', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
</script>
HTML:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Clone" href="#">Clone</a>
<a class="Remove" href="#">Remove</a>
</td>
</tr>
</table>
I have the following code:
$("#Table1 tbody").children().each(function(e){
$(this).bind('click',
function(){
// Do something here
},
false)
});
The Table1 html table has 2 columns; one for Names and one for a <button> element.
When I click on a table row, it works fine. When I click on the button, the button code fires; however, so does the row code.
How can I filter the selector so the button doesn't trigger the parent element's click event?
This is what you want.
It's stopPropogation that will stop the parents.
<table>
<tr>
<td>The TD: <input type="button" id="anotherThing" value="dothis"></td>
</tr>
</table>
<div id="results">
Results:
</div>
<script>
$(function() {
$('#anotherThing').click(function(event) {
$('#results').append('button clicked<br>');
event.stopPropagation();
});
$('td').click(function() {
$('#results').append('td clicked<br>');
});
});
</script>
Here's a link to an example of it working as well:
http://jsbin.com/uyuwi
You can tinker with it at: http://jsbin.com/uyuwi/edit
You could also do something like this:
$('#Table1 tr').bind('click', function(ev) {
return rowClick($(this), ev);
}); //Bind the tr click
$('#Table1 input').bind('click', function(ev) {
return buttonClick($(this), ev);
}) //Bind the button clicks
function rowClick(item, ev) {
alert(item.attr('id'));
return true;
}
function buttonClick(item, ev) {
alert(item.attr('id'));
ev.stopPropagation();
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Table1">
<tbody>
<tr id="tr1">
<td>
The TD: <input type="button" id="button1" value="dothis" />
</td>
</tr>
<tr id="tr2">
<td>
The TD: <input type="button" id="Button2" value="dothis" />
</td>
</tr>
</tbody>
</table>
Is it possible to remove the button code and just run the row code, therefore kind of using event bubbling.
Another couple options:
can you add a class to the TD that has the button in it and in the selector, do '[class!="className"]'
maybe try event.preventDefault(). You can see it being used here. this way you can prevent the default action that is triggered when the button is clicked, although I'm not sure if it will completely prevent the bubbling.