We have the following XHTML table:
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
When there is a click over a TD.gantt element, we want jQuery to get the value from input[name='line_config'] tag. We try the following jQuery code, but val() returned 'undefined':
$(document).ready(function() {
function sum_day(tag, status, column) {
var total_day = 0;
var index_pos = 0;
var values = 0;
values = tag.closest('tr').children("input[name='line_config']").val();
alert(values); //Return undefined
return total_day;
}
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
$(this).toggleClass('preop');
sum_day(gantt_tag, 'preop', $(this).index());
});
});
Are we getting right the value way? If anyone can help us, we appreciate... =)
Note jquery.children() will only return direct/immediate children, and since your input is not a direct/immediate child of the <TR> you will not get any of the inputs.
May I suggest something like this
$("input[name='line_config']", tag.closest('tr'))
children return the immediate children of the tr element. You should try by find i.e.:
values = tag.closest('tr').find("input[name='line_config']").val();
Not sure if this is the whole problem, but when you say var gantt_tag = $('td.preop');, there aren't any elements with the class of preop:
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
alert(gantt_tag.size()); // returns 0, i.e. no elements are matched
});
Related
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
I am trying to update my gridview by calculating a few things like TotalPrice and TotalPriceGST. The calculation part works fine. I want to update the fields of TotalPrice and TotalPriceGST when i leave the UnitPriceTxt textbox (On Focus Out). But when i do it with the following code it updates the first row and doesn't allow me to write the price in the later textboxes. Please Help!
<div>
<table cellspacing="0" cellpadding="4" id="ContentPlaceHolder1_gvQuotationItems" style="color:#333333;width:900px;border-collapse:collapse;float: left">
<tr style="color:White;background-color:#F07323;font-weight:bold;">
<th scope="col">Product Code</th>
<th scope="col">Description</th>
<th scope="col">Sap Pack</th>
<th scope="col">Quantity</th>
<th scope="col">UnitPrice</th>
<th scope="col">Total Price</th>
<th scope="col">Total Price with GST</th>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;">
<td style="width:160px;">BCR123A-1EA</td>
<td style="width:250px;">23477, Reference ethanols (H, M, L) (for</td>
<td style="width:30px;">1</td>
<td style="width:60px;">12</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
<tr style="color:#284775;background-color:White;">
<td style="width:160px;">459-UP</td>
<td style="width:250px;">459 bubbler</td>
<td style="width:30px;">1</td>
<td style="width:60px;">123</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;">
<td style="width:160px;">567-UP</td>
<td style="width:250px;">567 Unprepared Customer Bubbler Purchase</td>
<td style="width:30px;">1</td>
<td style="width:60px;">50</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
</table>
</div>
This is My Script:
$(function () {
$("#UnitPriceTxt").focusout(function () {
var TextBoxtxt = $('#<%=gvQuotationItems.ClientID %>').find('input:text[id$="UnitPriceTxt"]').val();
var TotalPriceLbl = $('#<%=gvQuotationItems.ClientID %>').find("#totalPrice");
var TotalPriceGSTLbl = $('#<%=gvQuotationItems.ClientID %>').find("#TotalPriceGST");
$("#<%=gvQuotationItems.ClientID %> tr").each(function () {
if (!this.rowIndex) return;
var Quantity = $(this).find("td:eq(3)").html();
var UnitPrce = $(this).find('input:text[id$="UnitPriceTxt"]').val();
var totalPrice = parseInt(Quantity) * parseInt(UnitPrce);
var GST = (parseInt(Quantity) * 17) / 100;
var TotalPriceGST;
TotalPriceGST = totalPrice + GST;
$(this).find("td:eq(5)").html('<label id="totalPrice" style="font-size:small" >' + totalPrice + ".Rs" + '</label>');
$(this).find("td:eq(6)").html('<label id="TotalPriceGST">' + TotalPriceGST + '</label>')
})
})
});
What you want is $('#UnitPriceTxt').blur(function(){...});
$.blur() is the "focus out" function you're looking for.
I have a basic table with names and prices generated according to buttons in the website. I need to compute the total for this table.
<table id="countit">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name"></td> //this is dynamically generated through buttons
<td id ="price" ></td> //this is dynamically generated through buttons
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th> //total goes here
</tr>
</table>
Can anyone tell me how to do it in Javascript, please?
Click here for Fiddle
<table id="countit" border="1">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name">aaa</td>
<td name="price">10</td>
</tr>
<tr>
<td id ="name">bbb</td>
<td name="price">20</td>
</tr>
<tr>
<td id ="name">ccc</td>
<td name="price">30</td>
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th>
</tr>
</table>
<script>
var tds = document.getElementsByName("price");
var total = 0;
for(var i=0; i<tds.length; i++)
total += parseInt(tds[i].innerHTML);
document.getElementById('grandtotal').innerHTML=total;
</script>
<tr>
<td id ="name"></td>
<td name ="price" ></td>
</tr>
If you are generating table rows from any back-end language then provide a common value to "name" attribute. Then from the javascript get these element using
var prices=getElementsByName('price');
for(i=0;i<prices.length;i++){
total = total+parseInt(prices[i].innerHTML);
}
once you get the total you can set this value to any element.
document.getElementById('grandTotal').innerHTML = total;
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.
Next, the code table:
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr class="encabezado">
<th rowspan="2" scope="col" width="15%">Area</th>
<th colspan="7" scope="col">Month</th>
</tr>
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr class="encabezado">
<th scope="row">Total</th>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia">...</td>
<td class="total_dia"> </td>
</tr>
</tbody>
</table>
The array of values works as follows:
array [0]: Off;
array [1]: preoperative;
array [2]: Operating.
This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:
$(document).ready(function() {
$('td.gantt').click(function() {
$(this).toggleClass('preop');
});
$('td.gantt').dblclick(function() {
$(this).toggleClass('operating');
});
});
Inactive TD always sum to the total. What I want to do? Simple:
1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive).
2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.
If anyone can help with the whole problem, o a parcial, I would really appreciate.
Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.
To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).