Develop Reference

How to add numbers in a <td> to an array only if another <td> contains certain text

I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!

To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>

Enable button if all rows below have been deleted

I have created with JQuery a table where I can add a certain text by pressing a button.
As you can see Product 2 and Product 3 can only be added once. Product 4 can be added several times. All text that is inserted can also be deleted by pressing the x-button.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove()
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>
My problem is that if I delete all rows below a disabled button I cannot add any new rows again. This case is shown in the picture below:
Any suggestions how to enable the button if all rows below have been deleted?
I appreciate your replies!

I added you one new function to your javascript
function enableButton(elemId) {
console.log(document.getElementById(elemId));
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
and i also set ids on your html buttons
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
let itemId = e.target.getAttribute('id');
deleteBtn.closest('tr').remove();
enableButton(itemId);
}
function enableButton(elemId) {
if (!document.getElementById(elemId)) {
var str = elemId.split('_');
var button = $('#'+str[1]);
$('#'+str[1]).removeAttr('disabled');
}
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm");
let targetButtonParent = targetButton[0].parentElement.parentElement;
var elemId = 'item_'+e.target.getAttribute('id');
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button id='`+elemId+`' type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" id='btn2' data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" id='btn3' data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" id='btn4' data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Just add $(".btn.btn-primary.btn-sm").attr("disabled", false); at the end of deleteRow method.
$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))
function deleteRow(e) {
let deleteBtn = $(e.target).closest(".deleteMe");
deleteBtn.closest('tr').remove();
$(".btn.btn-primary.btn-sm").attr("disabled", false);
}
function ourClickDispatcher(e) {
let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
let targetButtonParent = targetButton[0].parentElement.parentElement
targetButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<img src="" alt="" height="42" width="42">
<a href="">
Test Product2
</a>
</td>
<td class="deleteMe">
<button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
</td>
</tr>
`)
if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
targetButton.attr("disabled", true);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product 2
</button>
</td>
</tr>
<tr>
<td>Product 3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
</td>
</tr>
<tr>
<td>Product 4</td>
<td>
<button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
Add Product 4
</td>
</tr>
</tbody>
</table>

Finding text of <p> closest row inside a div HTML/Jquery

My table is built with the same ID's on every row, with a foreach loop. To find the text inside the <p class="comment" - I have to specify where ( I want to find the closest one )
My table looks like this:
<c:forEach items="${items}" var="item">
<div class="container theme-showcase" role="main">
<div class="row">
<div class="col-md-6">
<table class="table fixed">
<tbody id="extend">
<tr data-toggle="collapse123" class="clickableRow" nowrap="true" data-target=".demo${item.id}" id="${item.id}">
<td class="AMLLeft" nowrap="true">
<label for="important"style="display: inline !important">ID:</label>
<p class="important"style="display: inline !important">${item.id}</p>
</td>
<td align="right" class="AMLRight">
<pre class="thepre">Transaction sum: ${item.sum} ${item.currencyCode}</pre>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML ID: ${item.id}</p></div>
</td>
<td align="right" nowrap="false">
<div class="collapse123 demo${item.id}"><input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>AML Category: ${item.amlClientCategory}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Close" class="btn btn-xs btn-primary closeButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Client ID: ${item.clientId}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"><input type="button" value="Set Investigate" class="btn btn-xs btn-primary investigateButton"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="status">Status: ${item.status}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p class="comment">Comment: ${item.comment}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}"><p>Transaction sum: ${item.sum} ${item.currencyCode}</p></div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</c:forEach>
I want to find the text of <p class="comment">${item.comment}</p> but this time it's inside a <div>. I'm not sure how to do this but this is the code I've tried so far:
var commentValue = $(this).closest('tr.hiddenRow').siblings().find('p.comment').text();
Any help is very appreciated!
I know I've posted a similar question here but this is different because it's inside a <div>, and I can't help myself.

To save people trawling through the comments, the eventual solution is here:
https://jsfiddle.net/5nL1e31z/3
I believe this achieves what you wanted, and I've tried to break it out so it's clear what's happening: https://jsfiddle.net/5nL1e31z/ If it isn't quite right, just let me know and I can update it.
$('.test-button').click(function () {
var parentRow = $(this).parent().parent();
$(parentRow).css('background-color', 'red');
var hiddenRow = $(parentRow).siblings('.hiddenRow');
$(hiddenRow).css('background-color', 'yellow');
var commentTextP = $(hiddenRow).find('.comment');
console.log(commentTextP.text());
});

var commentvalue = $(this).parent().find('p').text();
http://jsfiddle.net/ux0a3zsx/
Because the button is what this refers to and p is not inside it

did you tried this?
var text= $(this).closest('.hiddenRow').find('.comment');

HTML/jQuery finding text in closest <p> tag

I've got a table with different td's with the same ID, this is my table, in a foreach loop:
<td class="AMLLeft" style="display:inline-block; !important">ID:
<p class="important">${item.id}</p>
</td>
<td align="right" nowrap="true" class="AMLRight">Transaction sum: ${item.sum} ${item.currencyCode}</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML ID: ${item.id}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>AML Category: ${item.amlClientCategory}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Close" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Client ID: ${item.clientId}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}">
<input type="button" value="Set Investigate" class="btn btn-xs btn-primary">
</div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Status: ${item.status}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
<tr class="hiddenRow">
<td align="left">
<div class="collapse123 demo${item.id}">
<p>Comment: ${item.comment}</p>
</div>
</td>
<td align="right">
<div class="collapse123 demo${item.id}"></div>
</td>
</tr>
I want to be able to find the value of the 2nd rows: <p class="important">${item.id}</p>, This is the code I've tried so far, which didn't work:
$(".commentButton").on('click', function () {
var id = $(this).find('p.important').value();
alert("id is:" + id);
});
Any help with this is very much appreciated!

$(this).closest('tr').siblings().find('p.important').text();
try this
Using the button select the tr use siblings() to get the tr of the p with .important. after getting the tr use .find() to search for the p.important and finally using .text() get the value.

$(".commentButton").on('click', function () {
var id = $(document).find('p.important').html();
alert("id is:" + id);
});
this is your button, which does not contain the item your searching.
.html gets the value between the html tags

expand and collapse row for ng-table not working

I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>

You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle