How to get each data from multiple tables in a form - javascript

I have a multiple html tables in a same page, I want to get country code when on click on country get nearest country code value
Ex:- 1).country-click nearest -- India
Ex:- 2).country-click nearest -- China
Ex:- 3).country-click nearest -- Japan
Here is my table
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
Here is script code
$(document).ready(function(){
$("button").click(function(){
console.log($(this).parents().closest('tr').find('#code').html());
});
});
Thanks for suggestions.

You can use siblings for table rows
Sorry for snippet code formating, I can't format it in this editor for some reason.
You are doing good on finding closest tr, now you have to check sibling rows that contain element with "#code" id (you should use class instead of id here, id must be unique, as berko commented).
Here is jquery code:
$(document).ready(function(){
$("button").click(function(){
alert($(this).closest('tr').siblings().find('#code').html());
});
});
..and here is snippet:
$(document).ready(function(){
$("button").click(function(){ alert($(this).closest('tr').siblings().find('#code').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table id='country'>
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>

Related

Getting the value from a regex element id in jquery datatable

I have a data table that has a structure like:
<tbody>
<tr>
<td>ABC<td>
<td id="invNumbers0">DEF<td>
</tr>
<tbody>
<tr>
<td>GHI<td>
<td id="invNumbers1">JKL<td>
</tr>
<tr>
<td>MNO<td>
<td id="invNumbers2">PQR<td>
</tr>
<tr>
<td>STU<td>
<td id="invNumbers3">WXY<td>
</tr>
I want to find the value of all the elements whose id starts with "invNumbers"
I have tried:
alert($('[id^=invNumbers]').value);
alert($('[id^=invNumbers]').val());
Your table HTML structure is currently not valid as you need to enclosed tbody's within the table and you are missing closing tags of td's as well.
In addition, to get the text whose id starts with "invNumbers" you need to use jQuery .text() function not .val()
Edit: Since you want them separated by space or commas. Ideally in that case you can use .each function to get each of text separately so that you can do whatever you want with each text individually.
Live Working Demo:
$('[id^=invNumbers]').each(function(x, o) {
console.log($(o).text()) //showing each id text seperately
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">DEF</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">JKL</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">PQR</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">WXY</td>
<td></td>
</tr>
</tbody>
</table>

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

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>

Sort column by value other than cell content

I'm using jQuery DataTables and I have one column that looks like shown below:
<td><span class="badge"> 123 </span> <span> customer name </span></td>
i.e, I put first some number (ID), then the actual name which I want to sort by.
How can I tell jQuery DataTables to sort correctly by customer name?
Use data-order attribute on td element as shown in this example.
<td data-order="customer name">
<span class="badge"> 123 </span>
<span> customer name </span>
</td>
You can do this with jQuery.
<table id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td data-search>Paul</td>
</tr>
<tr>
<td>13</td>
<td data-search>Nickson</td>
</tr>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
You have to add jquery.dataTables.min.js after including the jquery. You can find more about this here

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);

Removing elements by ID

I have a table with the following structure:
<table>
<tr>
<td>some column|1</td>
<td id="abc|1">abc</td>
<td id="abc|1">abc</td>
</tr>
<tr>
<td>another column|1</td>
<td id="def|1">def</td>
<td id="def|1">def</td>
</tr>
<tr>
<td>ome column|2</td>
<td id="abc|2">abc</td>
<td id="abc|2">abc</td>
</tr>
<tr>
<td>another column|2</td>
<td id="def|2">def</td>
<td id="def|2">def</td>
</tr>
</table>
The content comes from a database.
As you can see, the IDs have the suffix |x. I want to remove all elements with the suffix |2 in the 2nd column and all elements with the suffix |1 in the 3rd column.
Also the 3rd column should be shifted to the top, and all rows ending with |2 in the 1st column should disappear.
So that the final result looks like that:
<table>
<tr>
<td>some column|1</td>
<td id="abc|1">abc</td>
<td id="abc|2">abc</td>
</tr>
<tr>
<td>another column|1</td>
<td id="def|1">def</td>
<td id="def|2">def</td>
</tr>
</table>
This is my approach, but it doesn't work at all:
$("table td:nth-child(2)").find("[id$=2]").each(function() {
$(this).hide();
});
$("table td:nth-child(3)").find("[id$=1]").each(function() {
$(this).hide();
});
Here is the fiddle.
ID should be unique. It's better if you can change the HTML and make IDs unique.
IF CHANGING HTML IS NOT POSSIBLE
As both the selector are pointing to same element, use following
$("table td:nth-child(2)[id$=2], table td:nth-child(3)[id$=1]").hide();
Demo

Categories