How do i add a column to my HTML Table using JavaScript

JavaScript
1

I am trying to add to my HTML table using JavaScript.
what I want is to have an added column to the lines that the answer (3rd Column) is not correct. This column needs the proper answer and it needs the background to be changed.

Screen Shot 2020-04-18 at 5.49.57 PM
Screen Shot 2020-04-18 at 5.49.57 PM952×346 15.6 KB

<!doctype html>
<html>
<head>
	<title>Jasmine Lusty Assignment 4</title>
	<style>
		html, body {
		  font-family: arial;
		  }
		table {
		  border-collapse: collapse;
		  width: 80%;
		  margin: 1em;
		  }
		td,th {
		  border: solid grey 1px;
		  padding: 5px;
		  }
		th {
		  background-color: #7fffd5;
		}
		td {
		  text-align: center;
		  }
		.badAnswer {
		  background-color: #f47c6f;
		  }  
    </style>
</head>

<body>
<!-- Math ---->
	<h1>Math!</h1>
	
		<table id='table-math'>
		  <thead>
			<tr>
			  <th> 1st Number </th>
			  <th> 2nd Number </th>
			  <th> Answer </th>
			</tr>
		  </thead>
			  <tbody>
				<tr> <td>5</td> <td>3</td> <td> 8</td>  </tr>
				<tr> <td>7</td> <td>6</td> <td>13</td> </tr>
				<tr> <td>5</td> <td>5</td> <td>10</td>  </tr>
				<!-- Needs Proper Answer (11) --->
				<tr> <td>8</td> <td>3</td> <td>13</td> </tr>
				<tr> <td>4</td> <td>7</td> <td>11</td> </tr>
				<tr> <td>3</td> <td>9</td> <td>12</td>  </tr>
				<!-- Needs Proper Answer (13)--->
				<tr> <td>8</td> <td>5</td> <td>12</td> </tr>
				<tr> <td>2</td> <td>6</td> <td> 8</td>  </tr>
				<tr> <td>5</td> <td>9</td> <td>14</td> </tr>
				<tr> <td>6</td> <td>6</td> <td>12</td>  </tr>
			  </tbody>
		</table>
		
	<script language="javascript" type="text/javascript">
		const tableMath = document.getElementById('table-math');

	for (let line=1; line < tableMath.rows.length; line++)
	  {
	  if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
		{
		tableMath.rows[line].cells[3].classList.add('badAnswer')
		}
	  }
		
	</script>
</body>
</html>

Thanks for the Help!

2

HTML doesn’t allow you to have non-box grids, so add another td element to every row, and only fill them in when they are incorrect.

1 Like
3

If I add the other HTML column in is there a way to do the math between column 1 and column 2 to see if they match column 2 and add in the data to the 4th column if they don’t add up to the 3rd column?

4

Yes there is. You can loop through each row, and do that quite easily.

1 Like
5

How would you recommend doing that?

6

By using querySelectorAll to get the rows, forEach to loop through each of them, and the cells property to work with the different table data cells in the row.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.