CODEWITHSUNDEEP
javascripthtmldomhtml-table
user3529667
user3529667

Reputation: 1

How can I display the numbers in specific cells of the table using Javascript and HTML DOM?

I solved a part of this exercise, taking the input from user, and onclick of the button, it creates the table dynamically. Number of rows is equal to input, number of columns is twice the input taken from user. But I do not know how to display numbers inside of some cells like this.

Reference

function createTable() {
  var usrInput = document.getElementById('input').value;

  var theader = '<table border="1">\n';
  var tbody = '';
  for (var i = 0; i < usrInput; i++) {
    tbody += '<tr>';
    for (var j = 0; j < 2 * usrInput; j++) {
      tbody += '<td>';
      tbody += '1' + i + ',' + j;
      tbody += '</td>';
    }
    tbody += '</tr>';
  }
  var tfooter = '</table>';
  document.getElementById('layer').innerHTML = theader + tbody + tfooter;
}
<!Doctype html>
<html>
<body>
  <form>
    <input type="text" id="input" />
    <input type="button" value="Create Table" onclick='createTable()' />
    <br/>
  </form>
  <div id="layer"></div>
</html>

Upvotes: 0

Views: 62

Answers (2)

htoniv
htoniv

Reputation: 1668

u can try this it is another solution

function createTable() {
  var usrInput = document.getElementById('input').value;
  var theader = '<table border="1">\n';
  var tbody = '';
  for (var i = 0; i < usrInput; i++) {
    tbody += '<tr>';
    for (var j=usrInput;j>0;j--) {
        if (i == j-1) {
        tbody += '<td>';
      tbody += i+1 ;
      tbody += '</td>';
    } else {
    tbody += '<td>';
      tbody += "" ;
      tbody += '</td>';
    }
    }
    for (var j=0;j<usrInput;j++) {
        if (i == j) {
        tbody += '<td>';
      tbody += i+1 ;
      tbody += '</td>';
    } else {
    tbody += '<td>';
      tbody += "" ;
      tbody += '</td>';
    }
    }



    tbody += '</tr>';
  }

Upvotes: 0

Rajesh
Rajesh

Reputation: 24925

You can try something like this:

Logic:

In a matrix, you have to map diagonals, so if row and column are same, then one would be row + column === length-1. -1 because, loop starts with 0. Second diagonal would be row === column.

In your case, first diagonal is still valid. for other one, you can either try column - length === row or column-row === length.

function createTable() {
  var usrInput = document.getElementById('input').value;

  var theader = '<table border="1">\n';
  var tbody = '';
  for (var i = 0; i < usrInput; i++) {
    tbody += '<tr>';
    for (var j = 0; j < 2 * usrInput; j++) {
      tbody += '<td>';
      
      if(((i+j) === usrInput-1) ||((j-i) === parseInt(usrInput)))
        tbody += i+1;
      else{
        tbody += " ";
      }
      tbody += '</td>';
    }
    tbody += '</tr>';
  }
  var tfooter = '</table>';
  document.getElementById('layer').innerHTML = theader + tbody + tfooter;
}
td{
  width:20px;
  height:20px;
}
<!Doctype html>
<html>
<body>
  <form>
    <input type="text" id="input" />
    <input type="button" value="Create Table" onclick='createTable()' />
    <br/>
  </form>
  <div id="layer"></div>
</html>

Upvotes: 1

Related Questions