Changing Day Date of <td> using JQuery - javascript

I am trying to change all the table Due Date values from the 31st to the 25th using jquery. The current code I am using is not working, as it is putting all values instead of the single value.
var dueDate1 = $("td:contains(/31/)").text();
var dueDate = dueDate1.replace(/31/g, "25");
$("td:contains(/31/)").text(dueDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>

Your attempt is working on the entire set of data all at once.
$("td:contains(/31/)").text(); will return all the text of all the cells.
Instead, loop through the cells and update them individually.
$("td:contains('31')").each(function(idx, element){
$(element).text($(element).text().replace("31", "25"));
});
td { padding:2px; border:1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>

Related

Take data from a table to display as plain text

I want to take data from each row to display as simple text on the same page in a paragraph.
Example table below:
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
The output should look like:
A1 B1 C1 A2 B2 C2
I have tried look for the solution, but it is not working. I appreciate any help in advance.
Use document.querySelectorAll('td') to get all the td elements. Iterate over the elements using forEach loop and get their text using textContent. In the paragraph add this text using innerHTML
document.querySelector('#a').querySelectorAll('td').forEach((e)=>document.querySelector('#here').innerHTML+=e.textContent + " ")
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Using jquery, get all the td elements and iterate over them using each and append the text to the paragraph using append()
$('#a').find('td').each(function(i,e){
$('#here').append($(e).text() + " ")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Try like this, using HTML DOM children Property
var dataTable = document.getElementsByTagName('table');
var dataTableBody = dataTable[0].children[1];
for (var i = 0; i < dataTableBody.length; i++) {
console.log(dataTableBody[i].innerHTML)
}
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>

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>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle
Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>

Change background of entire table row

I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.
If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/
In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

Aligning data vertically in td elements for horizontally connected rows using jquery

I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.
You can merely add the desired <td>s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
$(document).ready(function(){
$('.comps + .comps').remove();
$('.myTable tr').each(function(i) {
if (i > 0) {
$(this)
.append('<td>' + list1[i - 1] + '</td>')
.append('<td>' + list2[i - 1] + '</td>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table>.

Categories