Question 43869 in Html Question posted in
Some basic documentation can be found here.

How to change the color of column 1 and row 1 to blue in my multiplication table using JavaScript? – Html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <style type="text/css">
        table,th,td{
            border: 2px solid black;
            border-collapse: collapse; 
        }
        td{
            width: 250px; 
            font-size: 30px

        }



    </style>
</head>
<body>
   <table id="mytable"></table>

   <script type ="text/javascript">
    var table=document.getElementById('mytable');
    var output="";
    for(var i=1; i<=10; i++) {
        output+="<tr>";
        for(var j=1; j<=10; j++) {
            
            output+="<td>"+i*j+"</td>";
        }
        output+="</tr>"
    }
    table.innerHTML=output;

   </script>
    
</body>
</html>

The below code is in HTML. I’m using basic javascript code and I’m trying to change the color for row 1 and column 1 numbers from 1-10 to the color blue. It looks like I’m able to render the multiplication number so far, but I am stuck on the logic of changing the colors. I’m assuming you’d have to use an if/else statement.

Tags:

3

Answers


  1. 0

    You know that it’s the first row if i === 1. You also know that it’s the first column if j === 1.

    Following this logic, you can add style='background: blue;' to every <td> element if it’s a first row or the first column.

    Below is an example solution:

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <style type="text/css">
        table,th,td{
            border: 2px solid black;
            border-collapse: collapse; 
        }
        td{
            width: 250px; 
            font-size: 30px

        }



    </style>
</head>
<body>
   <table id="mytable"></table>

   <script type ="text/javascript">
    var table=document.getElementById('mytable');
    var output="";
    var colorStyle = "style='background: blue;'";
    for(var i=1; i<=10; i++) {
        output+="<tr>";
        for(var j=1; j<=10; j++) {
          var firstRow = i === 1;
          var firstColumn = j === 1;
          var attr = (firstRow || firstColumn) ? colorStyle : '';
          output+="<td " + attr + ">"+i*j+"</td>";
        }
        output+="</tr>"
    }
    table.innerHTML=output;

   </script>
    
</body>
</html>

    This is the most important piece of code here:

    var firstRow = i === 1;
var firstColumn = j === 1;
var attr = (firstRow || firstColumn) ? colorStyle : '';

    You check if it’s a first row or column and based on that you either add the style attribute or not. The colorStyle variable is defined earlier as simply:

    var colorStyle = "style='background: blue;'";
    Login or Signup to reply.
  2. 0

    You could give a class to <td> if row (i) is 1 or (||) column (j) is 1:

    var table = document.getElementById('mytable');
var output = "";
for (var i = 1; i <= 10; i++) {
  output += "<tr>";
  for (var j = 1; j <= 10; j++) {
    if (i == 1 || j == 1)
      output += "<td class='colored'>" + i * j + "</td>";
    else
      output += "<td>" + i * j + "</td>";
  }
  output += "</tr>"
}
table.innerHTML = output;
    table,
th,
td {
  border: 2px solid black;
  border-collapse: collapse;
}

td {
  width: 250px;
  font-size: 30px
}

.colored {
  background-color: lightgreen;
}
    <html lang="en">

<body>
  <table id="mytable"></table>
</body>

</html>
    Login or Signup to reply.
  3. 0

    please use correct js Code insertRow() and insertCell() table methods.

    the rest is just a matter of mastering CSS with the use of various operators such as: nth-child(n)

    const myTable = document.querySelector('#my-table');
for(let r=1; r<11; r++)
  {
  let row = myTable.insertRow();
  for(let c=1; c<11; c++)
    row.insertCell().textContent = r * c;
  }
    body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
table {
  margin           : 1rem;
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : lightslategrey ; /* all borders color  */
  }
tr:nth-child(even) td { background-color: #f5f5f5; }
tr:nth-child(odd)  td { background-color: #dfc6c6; }

tr:nth-child(1) td,
tr td:nth-child(1) { 
  background-color: #82bfca; 
  }
td {
  min-width  : 2.4rem;
  padding    : .2rem 0 .1rem 0;
  text-align : center;
  }
    <table id="my-table"></table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search