jQuery add click function to multiple input [duplicate] - javascript

This question already has answers here:
Does ID have to be unique in the whole page?
(14 answers)
Closed 3 years ago.
I want to have a function that responds to a click on each instance of an input field. But the function only responds to a click on the first instance of the input.
The HTML is:
<table class="table">
<tr>
<td><input id="show-output" type="button" value=261 /></td>
<td>mhour test202</td>
</tr>
<tr>
<td><input id="show-output" type="button" value=260 /></td>
<td>mhour test145</td>
</tr>
</table>
The function is
$('#show-output').click(function(e) {
alert("hi");
});
A fiddle for this

Change your ids to classes, as an id should always appear just once on a page.
$('.show-output').click(function(e) {
alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="table">
<tr>
<td><input class="show-output" type="button" value=261 /></td>
<td>mhour test202</td>
</tr>
<tr>
<td><input class="show-output" type="button" value=260 /></td>
<td>mhour test145</td>
</tr>
</table>

Related

extracting html table with filled in radio buttons

I have table which contains several radio buttons. After selecting a radio button and clicking a button, the html of the table (including the filled in radio button) should be stored in a variable. However, only the html table is stored in a variable (i.e. there is no checked property in the stored html code).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>
<script>
function extract_table()
{
// store html table
var table = $('form').html();
alert(table);
}
</script>
</body>
</html>
You can reflect the checked or other applied properties, if you loop the items and set as attributes before getting html().
function extract_table() {
var table = $('form');
$('form :radio').each(function() {
$(this).attr('checked', this.checked);
})
alert(table.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>

How can I swap form values in table rows without swapping the table rows using javascript? [duplicate]

This question already has answers here:
How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?
(7 answers)
Closed 7 years ago.
I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure javascript, vanilla JS, or jquery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
Instead of trying to rearrange each individual form element, this just swaps the entire row, which has the same result with a lot less effort:
$('.down_arrow').click(function() {
$(this).closest('tr').insertAfter($(this).closest('tr').next());
});
$('.up_arrow').click(function() {
$(this).closest('tr').insertBefore($(this).closest('tr').prev());
});
table tr:first-child .up_arrow {
opacity: 0
}
table tr:last-child .down_arrow {
opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I took the liberty of fixing up the broken <option> tags here. If that was supposed to be two separate <select>s, this code will still work exactly the same -->
<table>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="1"></td>
<td><select><option>1</option><option>1a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="2"></td>
<td><select><option>2</option><option>2a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="3"></td>
<td><select><option>3</option><option>3a</option></select>
</td>
</tr>
<tr>
<td>
<button class="down_arrow">↓</button>
<button class="up_arrow">↑</button>
</td>
<td><input value="4"></td>
<td><select><option>4</option><option>4a</option></select>
</td>
</tr>
</table>
It may be better to bind the events to the table itself instead of each individual button:
$('table').on('click','.down_arrow',function() {...});
That way you can add or remove table rows programmatically without having to add new bindings. (In that vein, in general be wary of using .html() to overwrite parts of the the DOM, as it will blow away any event bindings you may have already included.)

How to get cell value to confirm on javascript? [duplicate]

This question already has answers here:
How to create a dialog with “Ok” and “Cancel” options
(17 answers)
Closed 7 years ago.
I have a html code and I want when I click delete to delete current row, then show the confirm " You want to delete [Name]?"
So, how can I get name value to confirm when I click delete using Jquery?
<table id="tblInfo">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Birthday</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name1</td>
<td>01/01/1990</td>
<td>
<a href="#" class="btnView" >View</a>
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Name2</td>
<td>01/01/1990</td>
<td>
View
Delete
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="text" name="" value="" size="25" /></td>
<td><input type="text" name="" value="" size="25" /></td>
<td>
Add
</td>
</tr>
</tfoot>
</table>
demo: http://jsfiddle.net/1qda1jpx/1/
$(document).ready(function() {
$("#tblInfo").on("click", ".btnDelete", function() {
var $this = $(this);
var name = $this.closest("tr").find("td:nth-child(2)").text(); // gets the name of the row
if (confirm("Do you want to delete" + name + "?"))
{ $this.closest('tr').remove(); } // upon confirmation, remove the row
});
});
You need to find the the closest tr element and then get the text from the 2nd td element.
here is the working jsfiddle for this problem.
$(document).ready(function(){
$('.btnDelete').click(function(){
var selectedName = $($(this).closest("tr").children()[1]).text();
console.log("Selected name is "+ selectedName);
});
});
https://jsfiddle.net/rbdharnia/03gbLhu4/1/

How to set background color for each column in table?

I have a table with four columns and two rows, 4th column have a button for each rows, now I want to change the background color in the second column of second row while click the button for each rows. Please let me know how to do this.
Here I have placed my code for your reference.
$(function(){
$('input').click(function(){
$('table').find('tr td:eq(1)').css('background-color', 'red');
});
});
HTML
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
</table>
Find the tr containing the button using closest(), then find the second column using that
$(function() {
$('input').click(function() {
$(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
</table>
You don't need to use a heavy JavaScript / jQuery for this case. Instead you can use <col>:
<table border="1" style="border-collapse:collapse;">
<col style="background-color: #f00;" />
<col style="background-color: #0f0;" />
<col style="background-color: #00f;" />
<col style="" />
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
</table>
Also note that you don't have </input> which might fail some code (eg. syntax highlighters).
Try this,
If you are aware of parent() in jquery then you can also try this,
$(function() {
$('input').click(function() {
$(this).parent().parent().find('td:eq(1)').css('background-color', 'red');
});
});
" $(this).parent().parent().find('td:eq(1)') " In this line of js, it will move to its parent tag twice, means $(this) is clicked input control and from that it will move to its parent tag twice to reach to its tag and from that position it will find the td at position 1. From here onwards you can do your color changing operation like shown in above js code.

How to hide entire table row<tr> in jQuery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a very big table of data. For reference I'm printing below the HTML of only two records:
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
<tr class="evenRow">
<th width="33%" style="text-align:center;" class="question-id">Que ID</th>
<th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
<th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
</tr>
<tr class="oddRow">
<td class="question-id" align="center" valign="top">
QUE51550
</td>
<td class="question" align="center" valign="top">
QUE51545
Delete
</td>
<td class="question" align="center" valign="top">
90.84<br />
</td>
</tr>
<tr class="oddRow">
<td class="question-id" align="center" valign="top">
QUE51589
</td>
<td class="question" align="center" valign="top">
QUE51393
Delete
</td>
<td class="question" align="center" valign="top">
91.80<br />
</td>
</tr>
</table>
Now If I want to hide the respective entire row when user clicks on the Delete icon for that row, how should I achieve this with jQuery?
Use .closest() to find the first matching parent
$('.delete_question').on('click', function(){
$(this).closest('tr').hide();
// any other code, e.g. some ajax here
});
You may also want to prevent the default click event (which is set to go to #deletePopContent)
$('.delete_question').on('click', function(e){
e.preventDefault();
$(this).closest('tr').hide();
// any other code, e.g. some ajax here
});
Try this:
$(".delete_question").click(function(){
$(this).parents('tr').hide();
})
FIDDLE DEMO
try this
$(".delete_question").click(function(){
$(this).parents('tr:first').hide();
});
this will be helpful in nested tables also.
This is something that I have been working on for a project.
Fiddle - http://jsfiddle.net/jDNy4/
When the remove button is clicked, an inline confirmation is required. If confirmed the tr is removed.
HTML
<table>
<thead>
<tr>
<th>Current</th>
<th>2013</th>
<th>2012</th>
<th>2011</th>
<th>2010</th>
<th>2009</th>
<th>Budget</th>
<th>Proposed</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr><td>Add Row</td></tr>
</tfoot>
</table>
Javascript (jQuery 1.10.1)
$(document).ready(function(){
$(".add").click(function(){
$("tbody").append('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="removeSelection">Remove</td></tr>');
});
$("tbody").on('click','.remove',function(){
$(this).parent().append( $( '<div class="confirmation">YesNo</div>'))
$(this).remove();
});
$("tbody").on('click','.removeConfirm',function(){
$(this).parent().parent().parent().remove();
});
$("tbody").on('click','.removeCancel',function(){
$(this).parent().parent().append('Remove');
$(this).parent().remove();
});
});
$(document).ready(function() {
var form = $('#ajax'); // contact form
// form submit event
$(".text").blur(function(){
$.ajax({
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
success: function(data) {
url: 'functions.php'; // form action url
},
error: function(e) {
console.log(e)
}
});
});
});

Categories