We Keep Coding

Using Conditional If statements with JavaScript DOM Table?

I have been given a table that has been created using the DOM and now I have to use if statements to print specific areas of that table. For example in the second photo, when i click 1 - 2 million, it should show the table but only display the countries that have a population that's between 1 and 2 million. My teacher has barely taught us JavaScript deeply and now gives us a DOM assignment that uses JavaScript If Statements. I would appreciate if someone could give an explanation on how i can print specific parts of the table when i click the links/button above. Thanks!

Here a roadmap:
Loop through your submenus with a for (or for ... in) statement and attach a click event listener on each one with addEventListener()
In the callback, this will refer to the <li> (or <a>, or whatever) element you clicked (and which is linked to an event). So you can access the DOM clicked element's data nor attributes.
In function of the clicked submenu, filter your <table> the way you want thanks to if statements. (even better: switch statement) Visually, rows will be hidden. In Javascript, you will update style attribute of the element.
Below an example. I propose to you to try to do it yourself with elements I gave you. Open the snippet if you are really lost.
Exemple:
Other functions/methods/statements I used below: querySelectorAll(), dataset, instanceof, parseInt(), onload, children
// Always interact with the DOM when it is fully loaded.
window.onload = () => {
// Gets all <button> with a "data-filter-case" attribute.
const buttons = document.querySelectorAll('button[data-filter-case]');
// For each <button>, attach a click event listener.
for (let i in buttons) {
const button = buttons[i];
// The last item of "buttons" is its length (number), so we have to check if
// it is a HTMLElement object.
if (button instanceof HTMLElement) {
button.addEventListener('click', filterTable); // Will execute the "filterTable" function on click.
}
}
}
// The function which will filter the table.
function filterTable(e) {
// Useless in my exemple, but if you have <a> instead of <button>,
// it will not execute its original behavior.
e.preventDefault();
// Get the value of "data-filter-case" attribute.
const filterCase = this.dataset.filterCase;
// Get all table body rows.
const tableRows = document.querySelectorAll('table > tbody > tr');
// Update display style of each row in function of the case.
for (let i in tableRows) {
const row = tableRows[i];
if (row instanceof HTMLElement) {
if (filterCase === 'more-than-44') {
if (parseInt(row.children[1].innerText) <= 44) {
// Hide the row.
row.style.display = 'none';
} else {
// Reset display style value.
row.style.display = '';
}
} else if (filterCase === 'less-than-27') {
if (parseInt(row.children[1].innerText) >= 27) {
row.style.display = 'none';
} else {
row.style.display = '';
}
} else if (filterCase === 'reset') {
row.style.display = '';
}
}
}
}
<button type="button" data-filter-case="more-than-44">More than 44</button>
<button type="button" data-filter-case="less-than-27">Less than 27</button>
<button type="button" data-filter-case="reset">Show all</button>
<table>
<thead>
<tr>
<th>ID</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>45</td>
</tr>
<tr>
<th>2</th>
<td>50</td>
</tr>
<tr>
<th>3</th>
<td>24</td>
</tr>
</tbody>
</table>

ScrollTo fires too early resulting in not scrolling all the way

I am making an Angular application which shows a table with a single tr. This row contains multiple td's which contain data. the table is built up like this:
<div class="col" id="TableCol">
<table id="Table">
<tbody>
<tr>
<td *ngFor="let item of items;">
<div
(click)="ItemSelected(item)"
draggable="true"
[class.selected]="item.id == selecteditem?.id"
(dragstart)="dragStart($event, item)"
(drop)="dropItem($event, item)"
(dragover)="dragoverItem($event, item)">
{{item.description}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
The table is scrollable when it overflows its X value
#TableCol{ overflow-x: scroll; }
Now i have a function which adds a td at the right side of this tr.
When this function is called an extra td shows up into my table and scrolling works fine.
The thing I want to achieve is that the table automatically scrolls all the way to the right when I add a new td.
I've tried to call this function right AFTER I've added the new item to the items array.
this.items.push(item);
scrollRight() {
document.querySelector('#mapLocationTableCol').scrollLeft = 10000;}
and
scrollRight() {
document.querySelector('#mapLocationTableCol').scrollTo(10000, 0);}
Both these give the same result:
They scroll my row all the way to the right except for the last element.
I think this is due to the scrollRight() being called before the table is redrawn.
Anyone have a solution to make it scroll after the table is drawn?
edit: I've made a stackblitz example:
https://stackblitz.com/edit/angular-d6lm6k

You should monitor the creation of the table cell with ViewChildren and the QueryList.changes event. In the markup, set a template reference variable on the td elements:
<td #cells *ngFor="let item of items;">
In the code, use ViewChildren to get the list of these elements, and subscribe to the QueryList.changes event in ngAfterViewInit. If a new cell was added, do the scrolling. In the code below, I set a flag to make sure that automatic scrolling is performed only when desired.
#ViewChildren("cells") cells: QueryList<ElementRef>;
private shouldScrollRight = false;
...
addItem() {
this.shouldScrollRight = true;
this.items.push(item);
}
ngAfterViewInit() {
this.cells.changes.subscribe((cellList) => {
if (this.shouldScrollRight) {
this.shouldScrollRight = false;
this.scrollRight();
}
});
}
See this stackblitz for a demo.

Showing Hidden Row in Table

I am using some code based on the following JSFiddle. The intention is to show more information when the user clicks the "Show Extra" link.
The problem that I'm having is that when the link is clicked on all but the bottom row of the table the hidden element is shown briefly and then closes.
I am populating my table using template strings in javascript. Here is the code that I use to add rows to the table:
this.addRecordToTable = function(bet, index, id){
console.log(index);
console.log($.data(bet));
var butId = id.toString();
if (bet.bookies == null){
bet.bookies = "";
}
if (bet.bet == null){
bet.bet = "";
}
var newRow = `
<tr>
<td>${bet.date}</td>
<td>${bet.bookies}</td>
<td>${bet.profit}</td>
<td><button id=${butId}>Delete</button></td>
<td>Show Extra</td>
</tr>
<tr>
<td colspan=\"5\">
<div id=\"extra_${index}\" style=\"display: none;\">
<br>hidden row
<br>hidden row
<br>hidden row
</div>
</td>
</tr>
`
console.log(newRow);
console.log("#"+butId);
$(newRow).appendTo($("#betTable"));
$("#"+butId).click(
function()
{
if (window.confirm("Are you sure you want to delete this record?"))
{
var rec = new Records();
rec.removeRecordAt(index);
$("#betTable tbody").remove();
var c = new Controller();
c.init();
}
});
$("a[id^=show_]").click(function(event) {
$("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
event.preventDefault();
});
}
EDIT:
I had to change $("a[id^=show_]").click to $("a[id=show_"+index).click..., as the event handler was being added to each element every time I added a new element. Thanks to #freedomn-m.

This code:
$("a[id^=show_]")
adds a new event handler to every existing link as well as the new one as it's not ID/context specific so all the show a's match the selector.
You need to add the context (newRow) or use the existing variable(s) as part of the loop that are already defined, eg:
$("a[id^=show_]", newRow)
$("a#show_" + index)
(or any other variation that works).
An alternative would be to use even delegation for the dynamically added elements, eg:
$(document).on("click", "a[id^=show_]", function...
in which case you'd only need to define/call the event once and it would be fired for new elements (ie put that outside the new row loop).

Trying to remove a child html element with javascript

I have 3 tables in my boostrap tab. Each tab as a table. The rows of this table is dynamically generated with csharp asp.net code. Right I Want a scenario were if a user click on the row of the first table, the clicked role of the first table get remove from the first table and is added to the rows of the second table.
My challenge as been getting to remove the row after the onClick process.
<tbody>
<tr id="kayode#yahoo.com">
<td> kayode <a class="chat" connectionid="135976e6-799b-4cda-a764-a00f7110d515"
data-parentid="kayode#yahoo.com"
href="/Visitor/StartChat?threadid=3&email=kayode%40yahoo.com"
operatorid="1" target="_blank" threadid="3">chat</a></td>
<td>271.0.0.1</td>
<td>Active</td>
<td></td>
<td>9/13/2014</td>
<td>04:15:18</td>
<td>02:52:55</td>
<td>271.0.0.1</td>
</tr>
</tbody>
My javascript code which I am trying to use to remove the row after the Click event.
function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
//alert(parentid);
//we are going to remove the role from this field
var element = document.getElementById(parentid);
element.parentNode.removeChild(element); //This line is a problem says
//document.querySelector("tablebody4 first").appendChild(element);
console.log(element);
}

This is untested, but I imagine jQuery will greatly reduce your headache here:
function updateWaitingState(sender) {
var parentId = $(sender).attr("data-parentid");
$('#' + parentId).appendTo('.tablebody4:first');
}
You may need to adjust the selector in the appendTo function, as it was a guess on my part.

function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
var element = document.getElementById(parentid);
$(element).appendTo('.tablebody2:first');
}

Apply a jquery event to a specific range or rows in a table

I have a table in a repeater. The data gets entered into the table and a class is assigned to each row depending on the type of data being loaded. For example:
<table id="detail-table">
<tr class="typeA">
<td>Value</td>
</tr>
<tr class="typeB">
<td>Value</td>
</tr>
<tr class="typeC">
<td>Value</td>
</tr>
<tr class="typeB">
<td>Value</td>
</tr>
<tr class="typeA">
<td>Value</td>
</tr>
</table>
The table is a collapsed table. typeA is the header, typeB is the child of typeA and typeC is the child of typeB. In the table example typeA has two immediate children and the first child also has a child.
When the user clicks typeA, the two typeB rows appear, and when typeB has children it will also expand to reveal the typeC row. I have an event handler that does this on click.
I need to apply the full detail expansion (typeA to typeC) for an item that has a specific value. I need to trigger the expand event on the parent and all children of that parent when the value of the cell in typeA equals the value received from the query string. I have some code that does this already. However, I feel it is a little bit of a hack. I was wondering if anyone had some suggestions? Here is what I have so far.
$(function() {
var tableRows = $('#detail-table').find("tr:gt(0)");
$(tableRows).each(function(i, val) {
//ExpandValue is a value in my C# page.
if ($.trim(val.cells[0].innerText) == '<%= ExpandValue %>'){
expandRows(i);
}
}
function expandRows(startIndex) {
// Expand the first row, the typeA class
// row that matches the value
$(tableRows[startIndex]).trigger('expand');
startIndex += 1;
while($(tableRows[startIndex]).attr("class") != "typeA"){
$(tableRows[startIndex]).trigger('expand');
startIndex++;
}
}
});
This finds all of the rows of the table. Then loops through the array of table rows. The condition checks the innerText of the first cell in each row. If the innerText of the cell matches the ExpandValue, the target row has been found. Send the index of this row to the expandRows function. In the expandRows function, expand the row at the startIndex, this is the typeA class row that matched the ExpandValue. Then increment the startIndex by one to point to the next row. The while loop checks the class of each row. Trigger the expand event on each row until the next typeA row is hit. This works and expands each row correctly. But again, I am new to jquery and I feel that there is probably some way to accomplish this in a better way. Any ideas?

You can speed-up your selector and loop at the top of your code:
//instead of using a pseudo-selector, we can use the `slice()` function to get all but the first element returned
var $tableRows = $('#detail-table').find("tr").slice(1);
//this `for` loop will perform a lot faster than the `.each()` loop
for (var i = 0, len = $tableRows.length; i < len; i++) {
if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
expandRows(i);
}
}
Here is a demonstration of how much faster a properly formatted for loop is than using jQuery's .each(): http://jsperf.com/jquery-each-vs-for-loops/2
Here are some docs for ya:
.slice(): http://api.jquery.com/slice
.eq(): http://api.jquery.com/eq
.text(): http://api.jquery.com/text
Also, you keep wrapping your tableRows variable in jQuery, which is not necessary because it is already a jQuery object from the start.
$(function() {
var $tableRows = $('#detail-table').find("tr").slice(1);
for (var i = 0, len = $tableRows.length; i < len; i++) {
if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
expandRows(i);
}
}
function expandRows(startIndex) {
// Expand the first row, the typeA class
// row that matches the value
$tableRows.eq(startIndex).trigger('expand');
startIndex++;
while($tableRows.eq(startIndex).attr("class") != "typeA"){
$tableRows.eq(startIndex).trigger('expand');
startIndex++;
}
}
});
I'm not sure if this is already doing what you want but on your expandRows function you should probably increment the startIndex by one before doing anything because if the first iteration through the for loop triggers the expandRows() function then it will pass an index of zero which will target the top row (which you exclude from your selector at the start).

$(function(){
var $list = $('#detail-table tr.typeA:gt(0) > td:eq(0):contains("<%= ExpandValue %>")');
for (var i = 0, len = $list.length; i < len; i++)
{
var $nextrows = $list[i].nextAll("tr");
for (var x = 0, ilen = $nextrows.length; x < ilen; x++)
{
if ($nextrows[x].hasClass("typeA")) break;
$nextrows[x].trigger('expand');
}
}
});