I'm quite new in jquery table . I have a code that will add text input in certain column that I clicked . In my case ,the column is number 9th .Below is my code :
$('#PtptnFileTblId_1').on( 'click', 'tbody td:not(:first-child)', function (e) {
var id = $(this).attr('id');
var file_id = $(this).attr('name');
var code = $(this).text();
var textrowId = $(this).children("td:nth-child(9)");
textrowId.html("<input type='text' id='callerid' name='callerid' style='width:100px;' value=''/>");
} );
After click on certain row ,I want its column number 9th will add some text fields that enable me to edit its text but the problem is my code seem not working. Before this I use the same code but different ways and it worked.Please help me with my code above .Any help will greatly appreciate
In your event handler, $(this) refers to the cell that was clicked. You can use closest('TR') to retrieve the table row:
$('#PtptnFileTblId_1').on('click', 'tbody td:not(:first-child)', function (e) {
...
var cell = $(this).closest('TR').children('td:nth-child(9)');
cell.html("<input type='text' id='callerid' name='callerid' style='width:100px;' value='' />");
});
Related
So I have problem which I can't solve for hours now..
When I press on button "Pridėti prekę" then one row is dynamically added to the table and when I write numbers in "Kiekis" and "Kaina" columns nothing happens in "Suma" column (It only happens to dynamically added row).
Piece of jQuery:
$(document).on('keyup', '#quantity, #price', function() {
$('#total').val(($('#quantity').val() * $('#price').val()).toFixed(2));
});
Please look at JSFiddle how is "working" my code:
https://jsfiddle.net/w5qz5exe/7/
Thanks for help in advance!
P.S I tried to change from div ID total, to div class total, then it works, but it applies to all rows instead to relevant.
You were referencing everything with id's.
$(document).on('keyup', '.quantity, .price', function() {
var row = $(this).closest('tr');
var rowPrice = $(row).find('.price').val();
var rowQuantity = $(row).find('.quantity').val();
$(row).find('.total').val( (rowPrice * rowQuantity).toFixed(2) )
});
https://jsfiddle.net/w5qz5exe/12/
Your problem is the fact that the inputs are using id's instead of something else. When looking for the item in question the search stops on the first Id found.
This updated fiddle https://jsfiddle.net/w5qz5exe/11/ shows how it could be done with classes.
$(document).on('keyup', '.quantity, .price', function(e) {
var $parent = $(e.target).parents('tr'),
$total = $parent.find('.total'),
$quantity = $parent.find('.quantity'),
$price = $parent.find('.price');
$total.val(($quantity.val() * $price.val()).toFixed(2));
});
In addition to the above remove all Id's from the inputs and change them to classes instead.
i have a list of size and quantity that is inside the select box and a table,
everytime the user select on size and quantity the table is being highlighted
here is the jsfiddle link for my code
http://jsfiddle.net/19ehdn54/9/
what i want to do now is when user try to click on the table list the select box of size and quantity should change also, i've tried adding this code
$('#qty2 td').click(function() {
$('#qty2 .highlight td').removeClass('highlight2')
var textvalue = this.id;
$('select#size').val(textvalue).change();
});
the select box for sizes is updating but the quantity is not, and only the bottom table part is clickable,
any help is much appreciated. thanks!
I just found an answer to this and add this code
jQuery('#qty2 td').click(function() {
var e = jQuery(this);
var elementID = jQuery(this).attr('id');
var parentID = jQuery(this).parent().attr('id');
//remove class attribute to td
jQuery('#qty2 td').removeAttr('class');
//set highlight class to clicked column
e.addClass('highlight2');
jQuery('#size').val(elementID);
jQuery('#qty').val(parentID);
});
I have a two datatables and have this function to move rows from one to the other, it works perfectly as is, but I want to trigger the action not by clicking the row but by clicking a button, tried changing it but won't work.
...
stockTable.on('click', 'tr' ,function() { //'#toggle' selector instead 'tr'
var $row = $(this); // $(this).closest('tr'); instead $(this);
var addRow = stockTable.fnGetData(this); //$(this).closest('tr'); instead
catalogTable.fnAddData(addRow);
stockTable.fnDeleteRow($row.index());
});
...
<td><button class="toggle">C</button></td>
....
Sorry if the question may seem dumb but I'm ne to javascript.
Thanks in advance.
Replace tr with .toggle and it should work. You were trying with the ID # selector, you need a class . selector.
stockTable.on('click', '.toggle' ,function() {
You then have to re-assign this to the closest tr:
var $row = $(this).closest("tr");
I have HTML Table on my page that's build dynamically. I make some of the cell editable. Also one cell contains calculated value based on two other cells in the same row. Here is the part of my table:
<tr class="mattersRow">
<td class="editableCell hours">0.50</td>
<td class="editableCell rate">170</td>
<td class="editableCell amount">85.00</td>
</tr>
In jQuery I make my cells editable on double click:
$('.editableCell').dblclick(function (e) {
if ($(this).find('input').length) {
return;
}
var input = $("<input type='text' class='form-control' />")
.val($(this).text());
$(this).empty().append(input);
$(this).find('input')
.focus()
.blur(function (e) {
$(this).parent('td').text(
$(this).val()
);
});
In term of trigger change event I extend var() method
$(function () {
// Extending the val method so that the change event is triggered when value is changed using the val function.
// caching the val function.
var $valFn = $.fn.val;
$.fn.extend({
val: function () {
// Our custom val function calls the original val and then triggers the change event.
var valCatch = $valFn.apply(this, arguments);
if (arguments.length) {
$(this).change();
}
return valCatch;
}
});
});
Now I trigger this event when value has change:
input.change(function () {
$(this).closest('.amount').val($(this).closest('.hours').val() * $(this).parents('.rate').val());
// This is I can't get value of hours and rate cells...
});
How to get value of rate and hours cells, calculate and put in amount cell?
You correctly started by converting the text to a value and editing it but in your final calculation you are trying to get the value of a text entry. Why not convert your cell entries to input fields which have values you can work with easily? E.g.
<td> <input type='text' class="editableCell hours" size='5' value='0.50'></td>
<td> <input type='text' class="editableCell rate" size='3' value='170'></td>
<td> <input type='text' class="editableCell amount" size='8' value='85.00'></td>
Closest function travels up the dom tree getting the parents of the element, similar to the parents function. Your rate and hour td elements are not parents so it will not find them.
You could try getting the siblings of the inputs parents.
$(this).parent().siblings(".rate");
Also it looks like your removing your inputs on blur so you will then need to get the text instead of value.
$(this).parent().siblings(".rate").text();
Finally, after couple hours, I found a proper way=)
So, basically I don't need to trigger change event, I can recalculate values after replacement input back to text of td simply remember current row while input is active. jQuery code:
$(this).find('input')
.focus()
.blur(function (e) {
var row = $(this).closest('tr'); // Remember row
$(this).parent('td').text($(this).val());
row.find('.amount').text(parseFloat(row.find('.rate').text()) * parseFloat(row.find('.hours').text())); // Calculate and put in the amount cell
});
I am just learning javascript and html, so I hope this isn't an easy question. I have found solutions to many of my questions on this site (thanks to the community) but this one is stumping me.
I am trying to create a dynamic table where it adds elements when the last element has been filled. There are two components to each element: the date, and a particular code. You click on the data cell to reveal the inputs, then when you hit enter or click away it hides the inputs. My problem is with JQuery's datepicker. See this fiddle:
http://jsfiddle.net/VEL7d/
Problem: The datepicker does not work properly for the original data cell. The first time you click on the date input, the datepicker shows up but does not disappear when you select a date. Then, the second time you try to select the date input for the first data cell the datepicker does not show up at all.
The datepicker works fine for all dynamically generated content, i.e. all data cells generated using javascript are fine. Interestingly, I am even able to grab the date from the input box that the datepicker was linked to, even though the second time you click on the date it shows the original "Date" string.
Things I have tried:
Looking on stackoverflow. I see a number of people have had issues with it before, and I have learned a lot. However, I have not come across this issue before. It seems most people have the problem of attaching the datepicker to dynamically created content, but I do not have that issue.
I've tried moving the .datepicker around to different areas, including an onload section, but it doesn't change anything. I know it is a little redundant to have the .datepicker function called where it is, but that is really just where it ended up as I am typing up this question.
I am sure there are other issues with my code, but I am sure I can figure them out. This datepicker issue related to the first data cell is just really stumping me. Any help is appreciated.
I was hoping not to have to post the code, since there is a lot and I am not sure where the problem might be. Here is the HTML:
<section id="chartData">
<table id="cycle_1">
<tr id="row1">
<td class="dataEntry" id="cycle_1_day_1" cycle="1" cycleDay="1" colRef="gray" colDef="true">
<span id="cycle_1_day_1_dateText" class="dateText">Date</span>
<input id="cycle_1_day_1_dateInput" type="text" style="display: none;" class="dateInput" value="Date">
<span id="cycle_1_day_1_codeText" class="codeText">New</span>
<textarea style="display:none;" class="codeInput" id="cycle_1_day_1_codeInput">New</textarea>
</td>
</tr>
</table>
</section>
Here is the javascript:
<script>
$("#chartData").on("click",".dataEntry",function()
{
var ID=$(this).attr('id');
document.getElementById(ID+"_codeInput").innerHTML = document.getElementById(ID+"_codeText").innerHTML
$("#"+ID+"_codeText").hide();
$("#"+ID+"_codeInput").show();
$("#"+ID+"_dateText").hide();
$("#"+ID+"_dateInput").show();
$("#"+ID+"_dateInput").datepicker();
});
$("#chartData").on("change",".dataEntry",function()
{
//Set the data block to the value of the input box when the input box loses focus
var ID=$(this).attr('id');
var codeInputData=$("#"+ID+"_codeInput").val();
var dateInputData=$("#"+ID+"_dateInput").val();
document.getElementById(ID+"_codeText").innerHTML=codeInputData;
document.getElementById(ID+"_dateText").innerHTML=dateInputData;
if ($("#"+ID).is(":last-child"))
{
//Get the cycle number and day for the selected data cell
var currentCycle = parseInt($(this).attr("cycle"),10);
var currentDay = parseInt($(this).attr("cycleDay"),10);
currentDay = currentDay+1;
//Set up new dateText box
var dateTextNode = document.createElement("span");
dateTextNode.setAttribute("class","dateText");
dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText");
//Set up new dateInput box
var dateInputNode = document.createElement("input");
dateInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateInput");
dateInputNode.setAttribute("type","text");
dateInputNode.setAttribute("style","display:none;");
dateInputNode.setAttribute("class","dateInput");
dateInputNode.setAttribute("value","Date")
//Set up new codeText box
var codeTextNode = document.createElement("span");
codeTextNode.setAttribute("class","codeText");
codeTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText");
//Set up the new codeInput box
var codeInputNode = document.createElement("textarea");
codeInputNode.setAttribute("style","display:none;");
codeInputNode.setAttribute("class","codeInput");
codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput");
//Create the new data cell
var node=document.createElement("td");
node.setAttribute("class","dataEntry");
node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString());
node.setAttribute("cycle",currentCycle.toString());
node.setAttribute("cycleDay",currentDay.toString());
node.appendChild(dateTextNode);
node.appendChild(dateInputNode);
node.appendChild(codeTextNode);
node.appendChild(codeInputNode);
document.getElementById(ID).parentNode.appendChild(node);
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText").innerHTML="Date";
if ($("#"+ID).parent().parent().is(":last-child"))
{
document.getElementById(ID).parentNode.parentNode.parentNode.innerHTML += "<br>";
//Create new table
currentCycle = currentCycle+1;
var tableNode = document.createElement("table");
tableNode.setAttribute("id","cycle_"+currentCycle.toString());
//Modify the codeTextNode from above for the new table
dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeText");
//Modify the codeInputNode from above for the new table
codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeInput");
//Create a new data node for the new table
var node=document.createElement("td");
node.setAttribute("class","dataEntry");
node.setAttribute("cycle",currentCycle.toString());
node.setAttribute("cycleDay","1");
node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1");
node.appendChild(codeInputNode);
node.appendChild(codeTextNode);
//Create the new table
trNode.appendChild(node);
tableNode.appendChild(trNode);
document.getElementById(ID).parentNode.parentNode.parentNode.appendChild(tableNode);
document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeText").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeInput").innerHTML="New";
}
}
});
// Edit input box click action and enter key
$("#chartData").on({
mouseup: function()
{
return false;
},
keypress: function(e)
{
if (e.keyCode == 13) {
$(".codeInput").hide();
$(".codeText").show();
$(".dateInput").hide();
$(".dateText").show();
$(this).blur();
}
}
},".dateInput, .codeInput");
// Outside click action
$(document).on("mouseup", function()
{
$(".codeInput").hide();
$(".codeText").show();
$(".dateInput").hide();
$(".dateText").show();
$(this).blur();
});
</script>