Unable to insert inner tr in a row

November 28, 2022

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!

>Solution :

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>`;