We Keep Coding

Unable to insert inner tr in a row

I'm trying to make a live NBA scores website using HTML, CSS, and JS.
I'm having trouble adding a inner tr under the game scores.
Here's what my table currently looks like:
Here's my current code JS and HTML:
(My current JS is building up the table and using innerHTML to modify the table under the tableData id)
else{
data += `<tr>
<td class = "left">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
}
<table>
<thead>
<tr>
<th style="width:40%; text-align:right;">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th style="width:40%; text-align: left">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Here's what I want it to look like (although centered better) and the code I used to build the example:
<table>
<thead>
<tr>
<th width= 40% text-align= right;>Home</th>
<th width= 20%; colspan= "2">Scores</th>
<th width= 40%; text-align= left;>Away</th>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td rowspan="2">Celtics<img src=${item.team1Img}></td>
<td>50</td>
<td>65</td>
<td rowspan="2"><img src=${item.team2Img}>Washington Wizards</td>
</tr>
<tr>
<td colspan="2">3QR</td>
</tr>
</tbody>
</table>
Basically, I'd like the "4QR" to be directly under the scores and still on the same row as the team names.
Thanks in advance!

In your javascript template literal, you forgot to put the rowspan="2" and it's caused everything to shift over.
data += `<tr>
<td class = "left" rowspan="2">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
You'll notice your table as constructed is missing 2 cells. Once you "add" those two cells in with the "rowspan", it will all fit back into place.

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>

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>.

Toggling specific paragraphs using jquery doesn't work

I am trying to get jquery function to work on table rows. I am basing my solution on the following stack overflow question, however whenever I click on the expand link nothing seems to happen. I tried to debug the javascript code but it doesn't to reach it.
Here is the HTML code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> td { white-space: pre } p { display: none } </style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks!

You have two options:
wrap the code in $(document).ready
place it after your body tag close at the bottom of the file (benefits)
Your code also had mismatch of target element.
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
.expanding-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>

wrap the code in a document ready statement
$( document ).ready(function() {
// Handler for .ready() called.
});

The thing here is your jquery selector, you are targeting your links wrongly, try this instead:
<script>
$("a[data-toggle=*]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
That way you will target all A tags, with a data-toggle with any value inside it.

An alternative way:
WORKING DEMO
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
JS:
$(document).on("click","a[data-toggle]", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});

How do I parse html in an external file from Javascript

I feel like I should know this, but as I'm sitting down trying to access an html file from my Javascript I don't really know where to start. I am using jQuery so do I just want to use jQuery.ajax()?
The external html is a table with various premium values, stored on the same domain but in a separate directory. When a user enters their birth year previously in the form and selects whether or not they are male or female and a smoker or non-smoker, I return specific values based on their age.
In the table below if they were 21, male, non-smoker i'd want to return the value in the mns cell from row #id21.
<table id="premiumRateTable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th id="age">Age Next Birthday</th>
<th id="cover">Default Cover</th>
<th id="mns">Male Non-smoker</th>
<th id="ms">Male Smoker</th>
<th id="fns">Female Non-smoker</th>
<th id="fs">Female Smoker</th>
</tr>
</thead>
<tbody>
<tr id="id20">
<td headers="age">20</td>
<td headers="cover">$100,000</td>
<td headers="mns">$108.99</td>
<td headers="ms">$154.55</td>
<td headers="fns">$44.31</td>
<td headers="fs">$68.61</td>
</tr>
<tr id="id21">
<td headers="age">21</td>
<td headers="cover">$150,000</td>
<td headers="mns">$160.81</td>
<td headers="ms">$229.15</td>
<td headers="fns">$58.16</td>
<td headers="fs">$77.48</td>
</tr>
<tr id="id22">
<td headers="age">22</td>
<td headers="cover">$150,000</td>
<td headers="mns">$139.37</td>
<td headers="ms">$199.167</td>
<td headers="fns">$58.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id23">
<td headers="age">23</td>
<td headers="cover">$150,000</td>
<td headers="mns">$128.64</td>
<td headers="ms">$183.59</td>
<td headers="fns">$56.28</td>
<td headers="fs">$72.89</td>
</tr>
<tr id="id24">
<td headers="age">24</td>
<td headers="cover">$150,000</td>
<td headers="mns">$121.94</td>
<td headers="ms">$172.87</td>
<td headers="fns">$58.29</td>
<td headers="fs">$79.90</td>
</tr>
<tr id="id25">
<td headers="age">25</td>
<td headers="cover">$150,000</td>
<td headers="mns">$112.56</td>
<td headers="ms">$158.13</td>
<td headers="fns">$61.11</td>
<td headers="fs">$84.91</td>
</tr>
</tbody>
</table>

Load the table once ($(document).ready()) and add it to an invisible element at the end of the body.
var dummyDiv = $("<div id='dummyDiv'/>").css("display","none");
dummyDiv.load("otherpage.html #id"+age);
dummyDiv.css("display","none");
$("body").append(dummyDiv);
And then you can run this code from anywhere to get the values from that table.
var dummyDiv = $("#dummyDiv");
var valYouWant = "mns"; //example value to grab
var value = dummyDiv.find('td[headers="'+valYouWant+'"]').text();
//do whatever you'd like with 'value'