Every time I click the tables cell I want to console.log the value with each every cell, every time I click? what is the proper calling?

Question

        <!-- The Row Number 0 -->

            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>

        <!-- End Row Number 0 -->

var anArray = [
    ["A1", "B1", "C1"],
    ["A2", "B2", "C2"],
    ["A3", "B3", "C3"],
    ["A4", "B4", "C4"],
    ["A5", "B5", "C5"],
    ["A1", "B1", "C1"],
    ["A2", "B2", "C2"],
    ["A3", "B3", "C3"],
    ["A4", "B4", "C4"],
    ["A5", "B5", "C5"]
];


var tables = document.getElementById("table");

var i, j;


for (i = 1; i < anArray.length; i++) {
    // create a new row
    var newRow = table.insertRow(tables.length);


    for (j = 0; j < anArray[i].length; j++) {
        // create a new cell
        cell = newRow.insertCell(j);

        // add value to the cell
        cell.innerHTML = anArray[i][j];

        tables.rows[i].cells[j].onclick = function() {

            //    var result = tables.rows[i].cells.item(j).innerHTML; 
            rIndex = this.parentElement.rowIndex + 1;
            cIndex = this.cellIndex;
            var result = tables.rows[rIndex].cells[cIndex].item().innerHTML; // this line of code that I was confused.
            console.log("Row : " + rIndex + " , Cell : " + cIndex);
            console.log(result);
        }
    }
}

I am confused how do I return the value of multidimensional array? every time I click the tables cell I want to console.log the value with each every cell, every time I click? what is the proper calling? any suggestions?

Please update the requirement, it's not clear to me what needs to be done here. — Abhisar Tripathi, May 04 '20 at 07:05

score 1 · Answer 1 · answered May 04 '20 at 07:09

1

I am a bit uncertain as well with your question. The simplest answer or suggestion I can give you is maybe have a function call at each cell, there are several ways of going about it. have a look here:

Using an HTML button to call a JavaScript function

You can swap out the input tag with a tr tag.

answered May 04 '20 at 07:09

Suhirthan

106
4

hello, I am sorry and I appreciate your suggestion. thank you sir. – Ghost May 04 '20 at 07:13

score 0 · Accepted Answer · answered May 04 '20 at 07:09

There is a problem in your code for getting the result, just remove .item() form this line:

var result = tables.rows[rIndex].cells[cIndex].innerHTML;

Then it will console.log() your result:

var anArray = [
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"],
  ["A1", "B1", "C1"],
  ["A2", "B2", "C2"],
  ["A3", "B3", "C3"],
  ["A4", "B4", "C4"],
  ["A5", "B5", "C5"],
];

var tables = document.getElementById("table");

var i, j;

for (i = 1; i < anArray.length; i++) {
  // create a new row
  var newRow = table.insertRow(tables.length);

  for (j = 0; j < anArray[i].length; j++) {
    // create a new cell
    cell = newRow.insertCell(j);

    // add value to the cell
    cell.innerHTML = anArray[i][j];

    tables.rows[i].cells[j].onclick = function () {
      //    var result = tables.rows[i].cells.item(j).innerHTML;
      rIndex = this.parentElement.rowIndex + 1;
      cIndex = this.cellIndex;
      var result = tables.rows[rIndex].cells[cIndex].innerHTML; // this line of  code that I was confused.

      console.log("Row : " + rIndex + " , Cell : " + cIndex);

      console.log(result);
    };
  }
}

<table id="table">
<!-- The Row Number 0 -->
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
<!-- End Row Number 0 -->
</table>

Every time I click the tables cell I want to console.log the value with each every cell, every time I click? what is the proper calling?

2 Answers2