I'm using JQuery to dynamically create table rows. Each row contains 3 text fields. As users type into a text field, the table row is cloned and multiple rows are added as required. All that works fine.
Numerical values are entered into the first 2 fields, which are multiplied. The output automatically appears in the 3rd text box. As the input fields are clones, I can't use getElementById to run the function & multiply the values.
I was told to use onchange using parent siblings, but I don't know how to do that. Can someone give me an example?
Here is a sample of my code in JS Fiddle: https://jsfiddle.net/mzctb778/
Since you are adding things dynamically you should use event delegation to listen for change events. Do this by attaching it to the table. So listen for a change on an input. Once you detect the change, get the row by looking up the DOM and select the inputs you need to multiply. Since you can not use ids since they need to be unique, use classes to reference the elements.
$("table").on("change", "input", function () { //use event delegation
var tableRow = $(this).closest("tr"); //from input find row
var one = Number(tableRow.find(".one").val()); //get first textbox
var two = Number(tableRow.find(".two").val()); //get second textbox
var total = one * two; //calculate total
tableRow.find(".three").val(total); //set value
});
$("button.add").on("click", function() {
var tbody = $("table tbody");
tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><input class="one" /></td>
<td><input class="two" /></td>
<td><input class="three" readonly="readonly"/></td>
</tr>
</tbody>
</table>
<button class="add">Add</button>
Add this to your script and it will do the calculations you want:
$("table select").on("change", function(){
var x=$(this).find(":selected").val();
var y=$(this).closest("td").siblings().find(":selected").val();
$(this).closest("td").siblings().find("input").val(x*y);
});
New JS Fiddle
Related
I have an html table called #DimensionAttributes whose columns are as follows:
<td><input type="text" name="txtLEName" value="#attribute.Key" /></td>
I intentionally wanted to maintain the name of the input element static. There can be multiple rows bound to this table. How do I loop through each row and find out the input elements value using the ID. The reason I wanted to use ID is because there can be multiple columns that would come soon in this table. Please help
Use selector, perhaps:
$("input[name='txtLEName']")
Well, first all, an ID must be unique, instead used class. Or if you eagerly wanted to use ID, try selecting by this :
Suppose you have this two element with same ID name :
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello"/></td>
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello"/></td>
Then your selector should be :
$('[id="hello"]')
Or another way, if you want to increment the ID name like :
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello1"/></td>
<td><input type="text" name="txtLEName" value="#attribute.Key" id="hello2"/></td>
As you dont know how many of element since the element created dynamically, then you can select it using this :
$('[id^="hello"]') // find the element ID name start with `hello`
If you want to loop thru each row, why not write something like this:
$("#DimensionAttributes tr input[name='txtLEName']").each(function(){
//Your code here:
//$(this).val()
});
var $rows = $('#table').find("tr:not(:eq(0))");
$rows.each(function () {
var $tds = $(this).find('td');
var val = $tds.find(':text').val();
console.log(val);
})
Assuming you have 1 input text each row you can select the table id find the tr and iterate and find td with input and get the value
DEMO
See jsfiddle: http://jsfiddle.net/bjCz3/
html
<table>
<tr class="copyMe">
<td><input type="text" name="test" /></td>
</tr>
</table> <a id="clickMe" href="#">Click Me</a>
jquery
$('#clickMe').click(function(event){
event.preventDefault();
var tr = $('.copyMe:last');
var newTr = tr.clone();
newTr.appendTo(tr.parent());
});
If you type text in the input, and click the click me, the row (including the input) is cloned and inserted - and has the data you entered.
The API for clone() says:
The .clone() method performs a deep copy of the set of matched
elements, meaning that it copies the matched elements as well as all
of their descendant elements and text nodes. For performance reasons,
the dynamic state of form elements (e.g., user data typed into input, and textarea or user selections made to a select) is not copied
to the cloned elements. The clone operation sets these fields to
their default values as specified in the HTML.
http://api.jquery.com/clone/
So why does my input have the value filled in, and more important, how can I prevent it? I want them to be empty/default like the documentation implies. I tried specifying both arguments as false even though they default to that, and it still copies it.
If you are working with inputs that aren't checked or have values set on page load. ( or you want defaults that are set)...cache a row before user touches one . Then clone that stored row to append when needed
/* store row on page load*/
var tr = $('.copyMe:last').clone();
$('#clickMe').click(function(event){
event.preventDefault();
var newTr = tr.clone();....
})
As far as a way to clear it yourself.
$('#clickMe').click(function(event){
event.preventDefault();
var tr = $('.copyMe:last');
var newTr = tr.clone();
newTr.find('input').val('');
newTr.appendTo(tr.parent());
});
Update
newTr.find("input[type=text], textarea").val("");
newTr.find('input:checkbox').removeAttr('checked');
http://jsfiddle.net/bjCz3/3/
Do it yourself after filling a bug report at jquery:
$('#clickMe').click(function(event){
event.preventDefault();
var tr = $('.copyMe:last');
var newTr = tr.clone();
newTr.find(":input").val(''); //find all input types (input, textarea), empty it.
newTr.appendTo(tr.parent());
});
Updated working fiddle: http://jsfiddle.net/bjCz3/2/
here's a demo table
<table id="table1">
<tr>
<td><label>name</label><input type="text" id= "name1"/></td>
<td><label>age</label><input type="text" id= "age1"/></td>
<td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td>
</tr>
and jquery code m trying is
$("#addRow").live("click", function (e, index) {
var val = ("#table1 tr").length();
val++;
$('#table1 tbody > tr:last').after('<tr><td><label>name</label><input type="text" id= "name"'+val+'/></td><td><label>age</label><input type="text" id= "age"'+val+'/></td><td><input type="button" id= "addRow"style="background-image:url("images/addicon.png");"/></td><td><input type=button id="deleteRow" style="background-image:url("images/removeicon.png");"></td>');
});
$("#deleteRow").live("click",function(e,index){
$(this).parent().closest("tr").remove();
});
Now problem comes when somebody add a row 2 times and delete a row
i.e val will be name2, name3
suppose name2 is deleted
then again adding row no. of rows is 2 so val++
result in 3
and new row will have name3 as id, this is creating problem for me.
What actually i want is, I should maintain the row count
1 2 3 ... like this irrespective what row is deleted.
Can anyone help me out with this, I have gone through loads of tutorial but none of them have maintained a uniform rowcount that's y i have put up this question.
You can use input names like name[] to have an array of values in the form. This is easier than using things like name1, name2, etc. If your concern is the labels, you can wrap an input in a label and skip the for, like so:
<label>String: <input></label>
Clicking String: focuses the input.
If you want to stick with what you have, just store val one scope outside of .click and increment it every time. Don't rely on the length.
By the way, you should also switch from .live to .on assuming it's available.
I'm trying to alert when a input box is greater than a second box, in example:
<td align="center"> <input type='text' name='cantidad{{=i+1}}' id='cantidad' value='{{=(x.cantidad)}}' size='3' readonly="readonly" /></td>
<td align="center"> <input type='text' name='desp{{=i+1}}' id='desp' value='' size='3' required='required' placeholder='Numero' onBlur="return validar(event)"/></td>
I have x set of input boxes, among these, the last two input boxes that I need check that the second can't be greater than the first. Then I can't figure out how catch these values in table that can be x set of them
The {{}} code is Python Embedded.
Edited: There are 12 input boxes for each row
Edited: I need that input with id='desp' can't be greater that the input with the id='cantidad' on every row
You can try by giving the ID's something like this:-
if(document.getElementById("first").value == document.getElementById("second").value){
//they are the same, do stuff for the same
}else if(document.getElementById("first").value >= document.getElementById("second").value
//first is more than second
}
or you can do something like this in the JSFiddle
If you add a css class to the last textbox, say we call it "textbox-last", then you can use jQuery to bind a function to the blur event as follows:
$('#yourtable').on('blur', '.textbox-last', function() {
var td = $(this).parent();
var prevTextboxValue = td.prev().find('input').val();
...
});
That gets you the value from the previous textbox for any textbox that has the class on it. Then add whatever logic you want to implement after that.
I'm dynamically creating and appending into a table, a <tr> and a <td> with the following code:
$("#table1").append(
'<tr>'+
'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'</td>'+
'</tr>');
It's Ok so far: I can load the Td data into another fields that I want and there's no problem on creating it.
But beyond creating it I must allow the user to remove the <td> dynamically, but as you can see, there's no ID to look for. What's the better way to allow the user to remove the <td> ?
Im trying the following code:
$("#table1>tbody>td>tr."+teste+"").remove();
But no success! The test variable is a number that I automatically define for the register.
Any help?
If test is the 0-based index of the row you want to remove...
$("#table1>tbody>tr:eq("+test+")").remove();
Set a unique id attribute when you dynamically create each cell.
<tr id="uniqueID"><td>Cell Content</td></tr>
Then use simple jquery to remove the row by id.
$('#uniqueID').remove();
Your remove code assumes there is a class on the TD. You'll have to target it with :eq() by referencing the value in your hidden field. If the value in the hidden field is a number (the index of the td the user selected = your counter), you could try something like this:
var hiddenFieldValue = $('input.hiddenFieldClassName').val();
$("#table1>tbody>tr>td:eq("+hiddenFieldValue+")").remove();
You could add a little x next to each driver name that will delete that td by changing your code a bit:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'<span onclick="$(this.parentNode).remove()">x</span></td>'+'</tr>');
Or you could add another function to the click handler that you are binding to each <td> that will display a message in a predefined <div> asking the user if s/he wants to delete that element:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">'+$("#DRVR_NAME").val()+'</td>'+'</tr>');
and then define a message area (id = 'messageArea') somewhere in your HTML and the following function in your code:
askDelete(el){
var MA=$('#messageArea');
MA.empty();
MA.html('Do you want to delete ' + el.innerHTML + '?<br>').append('<span id="confirmDelete">delete</span> <span id="cancelDelete">cancel</span>')
MA.find('#confirmDelete').click(function(){$(el).remove();});
MA.find('#cancelDelete').click(function(){MA.empty();})
}
then style your delete and cancel buttons as you wish.