I'm using JQuery for creating dynamic table row based on user insertion.
My HTML:
<table id="list">
<thead>
<tr>
<th>first header</th>
<th>second header</th>
<th>third header</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button> </td>
</tr>
</tbody>
</table>
And JavaScript:
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) {
if ($(this).val().length > 4 && $('#list tr:last td:nth-last-child(2) input[name=second]').val().length > 4) {
$('#list tbody').append('<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button></td>
</tr>');
}
});
The above code only works for the first row and the inserted row has no JS code-behind.
You haven't given complete code, but i suspect this is your issue..
Replace this
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event)
with this
$('#list').on('keyup', 'tr:last td:nth-last-child(2) input[name=second]', function (event)
You are probably not using proper event delegation, and you're trying to bind a keyup event on an element that doesn't exist yet (you say the rows are added dynamically). Instead we bind the keyup to the table that is part of the initial document, and say what happends when a child that meets X criteria has a keyup event fired
Your function does not bind to elements that don't exist on page load, use on for dynamically generated elements
$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {
Related
I have a table which has 200 rows. Jquery keyup or keydown are not working. My jquery code is :
$('.upd_tab tbody tr td:eq(2) input').on('keyup',function(e){
if (e.which==13)
$(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
});
Actually I want to focus or go to the input box which is located in next td. This works with 1st tr but not in rest 199 trs
Here is the HTML.
<tbody>
<tr id="chz1">
<td><input maxlength="16"/><div class="bx"></div></td>
<td><input/><div class="bx"></div></td>
<td><input maxlength="6"/><div class="bx"></div></td>
<td><input /></td>
<td><input /></td>
<td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
<td><input /></td>
<td><div class="bx"></div></td>
<td><div class="bx"></div></td>
</tr>
<tr id="chz2">
<td><input maxlength="16"/><div class="bx"></div></td>
<td><input/><div class="bx"></div></td>
<td><input maxlength="6"/><div class="bx"></div></td>
<td><input /></td>
<td><input /></td>
<td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
<td><input /></td>
<td><div class="bx"></div></td>
<td><div class="bx"></div></td>
</tr>
<!-- etc -->
</tbody>
Try this one:
$('.upd_tab input').on('keyup',function(e){
e = e || window.event;
var code = e.keyCode;
if (code == '13') {
$(this).closest('td').next().find('input').focus();
}
});
The problem you are having is that :eq(n) selects the nth element from the previous selection. That is, the collection of all td's that are a child of a tr of a tbody of an element with the upd_tab class. It behaves basically like this: $($('.upd_tab tbody tr td')[2]) (and the input below that element). If you would use :eq(10) it would select the input box on the second row.
What you want is :nth-child(3).
$('.upd_tab tbody tr td:nth-child(3) input').on('keyup',function(e){
if (e.which==13)
$(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
});
For an easier understanding what elements are being selected, consider colouring them, for example with .css( { 'background': 'blue' } );. This will give you a visual clue what is happening.
Html Table:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td><input type="text" placeholder="who" name="who" /></td>
<td><input type="text" placeholder="location" name="location" /></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"/></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"/></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"/></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
</table><!-- /table#table-data -->
Javascript:
$("input.tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table-data").deleteRow(i);
}
Here is my fiddle:
http://jsfiddle.net/tejdeep/b6A9R/
This code is cloning first two cells of a table row. I have add and delete button for every row.
I want this as like this:
http://jsfiddle.net/nKkhW/5/
Add button wants to be there for the cloning row and delete button should be there for the cloned row.
I want to include the functionality while cloning first two cell values has to come to the cloned row?
Let me know if you have doubts in this question.
What I have understood by your question, on that basis I have created Fiddle. Hope it will help you,except the default value case.
Updated fiddle
To delete row, you can try:
var $actualrow = $(this).closest('.tr_clone');
$actualrow.remove();
<input type="button" value="Delete" onclick="deleteRow(this)"/>
The problem is, where is your deleteRow() ? it's not in your fiddle..
fixed : http://jsfiddle.net/b6A9R/5/
and you have to change onLoad to No wrap, otherwise your function will not work.
Here is the updated code for onLoad.
JS
$(document).on('click','input[value="Delete"]',function(){
deleteRow(this);
});
DEMO
How could I make it so the code below retains what it does now but does the following:
a) When the add menu link/button is clicked it shows the bookingName menu div and the same item and qty boxes
b) When the above happens it also needs the abilty to add more rows to that particular just added menu
Demo of current work
jQuery:
$(document).ready(function () {
$('<tr/>', {
'class': 'menuDetails',
html: getMenuHTMLDetails()
}).appendTo('#addMoreItemsButton');
$('#addItem').click(function () {
$('<tr/>', {
html: getMenuHTMLDetails()
}).hide().appendTo('.menuDetailsBlock').slideDown('slow');
});
})
function getMenuHTMLDetails() {
var $clone = $('.menuDetails').clone();
$clone.find('[name="item[]"]')[0].name = "item";
$clone.find('[name="qty[]"]')[0].name = "qty";
return $clone.html();
}
HTML:
<div class="formBlock">
<p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
</div>
<div class="formBlock">
<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>
<div class="appendMoreItems"></div>
</div>
<div class="formBlock">
Add Item Add Menu
</div>
</div>
The first thing you should be aware of is that your html is invalid. You can't have something like:
<td><span>...</td><td>...</span></td>
Because this form needs the ability to be duplicated, you need to remove all IDs (and ideally change to them classes). e.g. id="addMenu" -> class="addMenu".
Instead of using your standard click handler, you should use delegates to handle any clicks within your outer container - read http://api.jquery.com/on/.
As for your duplication problem, place a template of your elements to be duplicated inside a script tag with an id you can reference and clone (with .html()), or, even better, consider looking into http://handlebarsjs.com/ or http://akdubya.github.io/dustjs/.
I have a table and if I click a button i want to take the value from charge_outstanding_NUM and set charge_receipt_NUM to it. I need a reusable script because I will not know how many rows will get posted through.
<table>
<thead>
<tr>
<th>ID</th>
<th>Value</th>
<th>Outstanding</th>
<th>Reciept</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>150.00</td>
<td id="charge_outstanding_1">150.00</td>
<td><input type="text" name="charge_receipt_1" id="charge_receipt_1" value=""></td>
</tr>
<tr>
<td>002</td>
<td>10.00</td>
<td id="charge_outstanding_2">10.00</td>
<td><input type="text" name="charge_receipt_2" id="charge_receipt_2" value=""></td>
</tr>
<tr>
<td>003</td>
<td>250.00</td>
<td id="charge_outstanding_3">250.00</td>
<td><input type="text" name="charge_receipt_3" id="charge_receipt_3" value=""></td>
</tr>
</tbody>
</table>
My jquery isn't working and I am not sure why. I click the button then loop through each col that starts with 'charge_outstanding_' then take the value and assign it to the closest input which is within the same row.
$('#pay_in_full').click(function(){
$("[id^=charge_outstanding_]").each(function(){
charge = $(this).val();
$(this).closest('input').val(charge);
});
});
working JSfiddle: http://jsfiddle.net/F5NvW/2/
Issue with your code: charge = $(this).val(); you are finding td which has no value, you need .html() for this
$(document).on("click", "#pay_in_full", function() {
$("[id^=charge_outstanding_]").each(function(){
var charge = $(this).html();
$(this).next().find('input').val(charge);
});
});
Suggestion: use class name with each <td> like this
Jsfiddle: http://jsfiddle.net/F5NvW/
Note: less error prone..
$(document).on("click", "#pay_in_full", function() {
$(".outstanding").each(function(){
var charge = $(this).html();
$(this).next().find('.paidAmount').val(charge);
});
});
.Closest will search for the ancestor elements, In your case the target input is the children of the next sibling of the selected element. So you have to use .find() or .children() to select that.
Try,
$('#pay_in_full').click(function(){
$("[id^='charge_outstanding_']").each(function(){
charge = parseInt($(this).text());
$(this).next().find('input').val(charge);
});
});
Additionally, You are selecting a td element, so you have to use .text() to get its text not .val()
DEMO
I have this:
<table id="myTable" style="width: 650px;">
<thead>
<tr style="font-weight: bold;">
<td>Name</td>
<td>Price</td>
<td>Supplier</td>
<td>Amount</td>
<td>Add</td>
</tr>
</thead>
<tbody>
<tr>
<td>Fish</td>
<td>299</td>
<td>BlueHouse</td>
<td>
<form action="method">
<input type="hidden" name="product_id" value="1" />
<input class="hideme" type="text" name="amount" value"" />
</td>
<td>
<input class="hidden" type="button" name="Add" />
</form>
</td>
</tr>
</tbody>
</table>
With the JS:
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
});
CSS:
.highlight{
background: #CCC;
}
.hideme{
display: none;
}
Which works like when you click on one of the 's thats inside , then it will highlight it by toggling the CSS class "highlight".
Now what I would like to do also is showing the input fields that has the class "hideme".
First I thought to do $('.hideme').show(), but since there's more 's than one, this wouldnt work. And i would like it to show the input fields for the current toggled .
So when you click again on the tr to toggle 'off' (so it doesnt have the highlight class), i would like to have the input fields to hide again.
Hope you understood, otherwise just comment.
How can i do this?
Add '$(this).find('.hideme').toggle(); to the tr click event.
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});
jsfiddle - http://jsfiddle.net/pdbQH/1/
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('input[type=text]').toggleClass('hideme');
});
UPDATE To avoid the toggle when you focus on the INPUT
$('#myTable > tbody tr').live('click', function(event){
if(event.target.tagName == 'INPUT') return false;
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});