How to get a first td values of every table using JQuery? - javascript

I want to select all first td values using JQuery.
Here is my code:
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
I want to get only 2 td (Status.Worksheet ID) elements from my above code using JQuery

You can pass any valid CSS selector to JQuery, so all you need is:
$("td:first-child");
// This will find and group together all the `<td>` elements that are the first ones
// within their parent (<tr>).
var $results = $("td:first-child");
// You can loop over the set and work with the individual DOM elements...
$results.each(function(index, result){
// result is the DOM element we're looping over
console.log(result.textContent);
});
// Or, you can access a specific element by index:
console.log($results[0].textContent + ", " + $results[1].textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr id="#ASPxGridView1_DXHeadersRow0">
<td id="ASPxGridView1_col0" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;">
<tbody>
<tr>
<td>Status</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
<td id="ASPxGridView1_col1" class="dxgvHeader" onmousedown="ASPx.GHeaderMouseDown('ASPxGridView1', this, event);" style="border-top-width:0px;border-left-width:0px;">
<table style="width:100%;">
<tbody>
<tr>
<td>Worksheet ID</td>
<td style="width:1px;text-align:right;"><span class="dx-vam"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>

Related

Get text of specific element by index

I want to get the text of the second to last table row, so I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num")[tradeNumEl].text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
However it gives me:
Uncaught TypeError: $(...)[tradeNumEl].text is not a function
How can I fix this? Here's the fiddle: https://jsfiddle.net/45a9sc6k/4/
Accessing a jQuery object by index returns the Element object at that index of the collection. It does not return a jQuery object - hence your error. To fix this, use eq() instead:
console.log($("td.trade-num").eq(tradeNumEl).text());
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
You have to use eq() with index no as parameter. .eq(index) Reduce the set of matched elements to the one at the specified index.
var tradeNumEl = $("td.trade-num").length - 2;
console.log($("td.trade-num").eq(tradeNumEl).text() )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>
You also can create the object of the found element
///I want to get the text of the second to last table row using js and jquery. So I tried to do this:
var tradeNumEl = $("td.trade-num").length - 2;
console.log($($("td.trade-num")[tradeNumEl]).text(), tradeNumEl)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="trade-num">100</td>
</tr>
<tr>
<td class="trade-num">101</td>
</tr>
<tr>
<td class="trade-num">102</td>
</tr>
<tr>
<td class="trade-num">103</td>
</tr>
<tr>
<td class="trade-num">104</td>
</tr>
<tr>
<td class="trade-num">105</td>
</tr>
</table>

Javascript store table in a variable with conditions

This is how my page looks like:
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
I would like to store the tables with class name bgLtTable. These table can appear up to 3-4 times in this page. Is it possible to get the specific table using the div above it? Something like:
var tableAddress = div.innerHtml="Customer Addresses".table.bgLtTable;
var tableMembers = div.innerHtml="Family Members".table.bgLtTable;
Maybe try to use document.getElementsByTagName("TABLE");
This will give you an object that is accessible via index
You can then assign those elements to a variable and loop through it but look where the class attribute is equal to className for example
var element = document.getElementsByTagName("TABLE");
for (var i = 0; element.length > i; i++)
{
var elementClass = element[i].getAttribute('class');
}
I am not 100% sure this answers your question how I understand is you just want to get the class.
I hope this helps I am also pretty new to coding but always willing to help if I can.
var CustomerAddressesTable = $('div.smTitle:contains("Customer Addresses")').next('.bgLtTable');
console.log($("<div />").append($(CustomerAddressesTable).clone()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="prnt">
<td>
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
</td>
</tr>
<tr class="prnt">
<td colspan="3">
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
</td>
</tr>
</table>
This method will give you the html of the required table.

Calculating sum of td classes using js or jQuery

I have a dropdown select menu with various options (i.e. 5, 10, 15, 20...) that represents # of computers. The default select menu value is 5. I am using some js to multiply the dropdown selection by an amount (i.e. 10) and populates a table td with a class of .price-1. So, for example if the user leaves the default selection of 5, the calculated value of .price-1 is 50.
This is working fine. 
However, I then need to sum .price-1 with a few other <td> classes (i.e. .price-2, .price-3, .price-4...) to get a grand total in $ values that shows in #result.
How can I use js or jQuery to sum these td classes to get the grand total?
Below is my html of my table I need to sum.
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"> </td>
</tr>
</tbody>
</table>
Get all td elements either using attribute value contains selector or by second td element of tr using :nth-child(). Now iterate over them using each() method and get sum using the text inside.
var sum = 0;
$('td[class*="price-"]').each(function() {
sum += Number($(this).text()) || 0;
});
$('#result').text(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
With Array#reduce method as #rayon suggested.
$('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) {
return sum + (Number($(ele).text()) || 0);
}, 0));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
<tbody>
<tr>
<td>Item1</td>
<td class="price-1">calculated amount populated here</td>
</tr>
<tr>
<td>Item2</td>
<td class="price-2">calculated amount populated here</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-3">13</td>
</tr>
<tr>
<td>Item3</td>
<td class="price-4">30</td>
</tr>
<tr class="summary">
<td class="totalOrder">Total:</td>
<td id="result" class="totalAmount"></td>
</tr>
</tbody>
</table>
jQuery Object has a direct attribute referring to the number of the matched elements.
var sum = $('td[class*="price-"]').length;
$('#result').text(sum);

jquery: move (sets) of TR to a newly moved TD

first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.
here is what my generated table looks like:
<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>
<tr>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>
next:
I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like:
<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader">header1</td>
<td class="gheader">header2</td>
..and so on
</tr>
<tr>
now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:
<tr>
<td>label(id)</td>
<td>checkbox(id)</td>
<tr>
in between each headers which was newly moved
possible table output would look like:
<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""> </td>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>
other notes:
colspan 2 (on gheader) is auto generated
Try
var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()
Demo: Fiddle

jquery auto print the row number

i've a table with 10 row, is it possible to print the row number (from 1 to 9, the first row is NO&title, the second row should be 1) to the td with class "sno" based on the size of the table? here is the html:
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
the result should be
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno">1</td>
<td> </td>
</tr>
<tr>
<td class="sno">2</td>
<td> </td>
</tr>
<tr>
<td class="sno">3</td>
<td> </td>
</tr>
<tr>
<td class="sno">4</td>
<td> </td>
</tr>
<tr>
<td class="sno">5</td>
<td> </td>
</tr>
<tr>
<td class="sno">6</td>
<td> </td>
</tr>
<tr>
<td class="sno">7</td>
<td> </td>
</tr>
<tr>
<td class="sno">8</td>
<td> </td>
</tr>
<tr>
<td class="sno">9</td>
<td> </td>
</tr>
The question is not generate the table, it is print the right number to target
Try with the simpleone
$('table tbody tr').not(":first").each(function(idx){
$(this).children(":eq(0)").html(idx + 1);
});
Here is the jsfiddle example: http://jsfiddle.net/3BBEN/
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});
Table row elements have a rowIndex property that is the zero–based sequence number for the table
section that they are in. So if you have a reference to a cell you can use:
var rowIndex = cell.parentNode.rowIndex;
If you have header rows in a table, you probably should put them in a thead table section, then
you can number the rows in tbody section easily, e.g.
<table>
<thead>
<tr>
<td>head<td>head
</tr>
</thead>
<tbody>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
</tbody>
</table>
So now you can do something like:
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;
for (var i=0, iLen=rows.length; i<iLen; i++) {
rows[i].cells[0].innerHTML = i + 1;
}
};
Of course you can get the rows some other way (e.g. class), but the above is independent of that.
Try this:
$(document).ready(function(){
$cells=$("table td.sno");
for(var i=0;i<$cells.length;i++)
{
// alert(i);
$cells.eq(i).text(i);
}
});
Check on fiddle http://jsfiddle.net/qcWec/1/
try this::
$(document).ready(function(){
var i=1;
$('.sno').each(function(){
$(this).text(i);
i++;
});
});

Categories