We Keep Coding

How do I highlight a table row when checkbox is selected? Angular 7

So let's skip the the table headers to my table body. I have a populated table:
HTML:
<tbody>
<tr *ngFor="let e of emails; let i = index">
<td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
<td id="subject-{{i}}">{{e.sender}}</td>
<td id="subject-{{i}}">{{e.subject}}</td>
<td id="subject-{{i}}">{{e.date}}</td>
</tbody>
I want the table whole row to display a CSS class when the user checks the checkbox. And then the color should go back to normal when the user deselects. Just UI stuff to show the user that an email has been selected. I currently have an empty CSS and .ts file.

The way you have done it here is more involved because presumably you have some logic inside addToSelectedList event that will add/remove the email depending on the checked state. The easiest way is to add a property on the email entity isSelected, and do this:
<input ... [checked]="e.isSelected" >
On your tr add the ngclass binding as suggested by others as follows:
<tr [ngClass]="{ 'selectedcssclass' : e.isSelected }"...
Other observation in your code there isn't a closing tr that should be wrapping around all the tds.

Not an Angular expert, but you can achieve just that using a JS onchange event bound to your checkbox:
$(".box").on("change", function() {
$(this).parents("tr").toggleClass("highlight");
});
.highlight {
background-color: #ffff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Label 1</td>
<td><input type="checkbox" class="box"/></td>
</tr>
<tr>
<td>Label 2</td>
<td><input type="checkbox" class="box"/></td>
</tr>
</table>

How to get value of a td of a different td when a checkbox is clicked?

I have a table set up like this:
<tr class="rgRow" id="someID" style="color:Red;">
<td>
<input id="SelectCheckBox" type="checkbox" name="SelectColumnSelectCheckBox">
</td>
<td style="white-space:nowrap;display:none;">1896730</td>
<td style="white-space:nowrap;display:none;">171748</td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;">Onboard</td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;"> </td>
<td style="white-space:nowrap;">
<input id="SomeValueWorkCompleted" type="checkbox" name="SomeValueWorkCompleted" checked="checked">
</td>
<td style="white-space:nowrap;display:none;"> </td>
<td style="white-space:nowrap;">ABCDE</td>
<td style="white-space:nowrap;display:none;">65841</td>
<td style="white-space:nowrap;">FR-12345</td>
<td style="white-space:nowrap;display:none;">12345678.87599587</td>
<td style="white-space:nowrap;display:none;">987654.04205552</td>
</tr>
and jQuery code to grab some value from another td in the table (FR-12345 in this example which does exists twice in the table). The value I need to get is 5 td up and 4 td down. Currently we are using the following jQuery to grab the needed value when the SomeValueWorkCompleted checkbox is checked:
$('input[id$=WorkCompleted][type=checkbox]').change(function() {
if($(this).prop("checked") == true){
var test = $(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]
console.log(test.innerText)
}
else if($(this).prop("checked") == false){
}
});
Is there a better way than using
$(this).closest('td').prev('td').prev('td').prev('td').prev('td').prev('td')[0]
to grab the value of the td?

If you know the "index" of the td you'll need the data from (ie. it will always be the 5th td in the table), you can use:
const tds = document.getElementById("tableIdGoesHere").querySelectorAll("td");
...to generate an array of all tds, then if the td is always the 5th in the table:
console.log(tds[4].innerText)
...should be the value you're looking for.
EDIT: Sorry: tds[4].innerText Haven't had coffee yet. ;)

If you are using jQuery, you can use the :nth-child selector (more info here)
Since your checkbox is inside a specific row, you can move your selector to that row and then use the child selector, like this:
// If the 5th child
$(this).parent("td :nth-child(5)")

You can use index() and eq() of jQuery to get the values as follows:
$("#SomeValueWorkCompleted").change(function() {
var parentTD = $(this).closest("td");
var index = $("#someID td").index(parentTD);
value = $("#someID td")
.eq(index - 5)
.text();
console.log(value);
});

Click a link in a table row based on text in that row

I have a table which has multiple rows and a link on the end.
I want to click on the link in the row which has the text I'm looking for. Example:
<table class="repeater large">
<tbody>
<tr>
<td headers="Cardholder ID" nowrap="nowrap">1234</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Closed</td>
<td headers="Card Last Four">1234</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
<tr class="alternaterow">
<td headers="Cardholder ID" nowrap="nowrap">5555</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Active</td>
<td headers="Card Last Four">555</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
</tbody>
</table>
I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.
I've tried breaking down the table into a array and getting the specific child number.
I was trying to create a way to get to that specific link in the table.
function getLinks() {
var links = document.querySelectorAll('#page > table');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('id');
});
}
I simple need to get that link on the row of my choice.

You could iterate over the table rows then get the id from the first element.
If the text equals the ID you are looking for then get the last element and click();
var rows = document.querySelectorAll('table tbody tr');
[].forEach.call(rows, function(tr) {
var td = tr.querySelector('td:first-child');
if (td.innerText === '5555')
tr.querySelector('td:last-child').click();
});
See the fiddle here

How can we get table object which is inside a form using formid - in Jquery?

I have a form like below
form name="myform" id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
using the form id is there anyway to get the table object inside this form ?
i have tried the below way,that way i can get all the inputs inside the form but i couldn't get the table object
$("form#myform:input").each(function(){
var input = $(this);
});
can anyone suggest a way to do the same.

I'm not sure what you want to do with the table, but you can access it using the following selector:
var yourTable = $("#myform table");
The selector is looking for table element inside element with ID myform.
If you want to get the row selector (as you mentioned in comments), then you can use add selector for tr:
$("#myform table tr").each(function(){
var currentRow = $(this);
// do what you need with current row
});

I think this is what you want
HTML
<form id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
<table class="dest-table">
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">a</td>
<td class="ng-scope">b</td>
<td class="ng-scope">c<td class="ng-scope">d</td>
</tr>
</table>
JS
$(document).ready(function() {
$("#myform tr").on("click", function(event) {
$(".dest-table tr").html($(event.currentTarget).html());
})
})
Fiddle
https://jsfiddle.net/ja454mfx/1/

What about this :
$("form#myform>table").each(function(){
var table = $(this);
});
You use ">" to access the direct descendant which is a table.
EDIT:
$("form#myform>table>tr").each(function(){
var trInner = $(this).html();
});

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?

You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle

simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});