CODEWITHSUNDEEP
javascripthtml
user9623870
user9623870

Reputation:

Creating a JS function that colors a specific cell

I am trying to create a separate function that once a table has been generated, a value x and y can be placed within the input and it will highlight the desired cell a certain colour.

My issue arises when I try to select the cell specifically, my code breaks down at 

var change  = document.getElementById("table").tr[rowIndex].td[cellIndex];


// functions to create values of r and c
function GenerateTable() {

    var tblBody = document.createElement("tbody");
    for (var i = 0; i < irow.value; i++) {

        var row = document.createElement("tr");

        for (var j = 0; j < icol.value; j++) {
            var cell = document.createElement("td");
            row.appendChild(cell)
        }


        tblBody.appendChild(row);
    }
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

}

//selector function
function SelectCell() {

    //grab value from the input x and y
    var tr = document.getElementsByTagName("tr");
    var td = document.getElementsByTagName("td");


    //insert the value of x and y into an array retriever

    var rowIndex = document.getElementById("valy").value;
    var cellIndex = document.getElementById("valx").value;
    //*********BREAKS DOWN HERE*******
    var change = document.getElementById("table").tr[rowIndex].td[cellIndex];

    change.style.backgroundColor = "red";
    //change color of specific coord            
}
<label>Rows</label>
<input type="number" id="irow">
<label>Cols</label>
<input type="number" id="icol">
<input type="submit" id="smit1">
<input type="number" id="valx" placeholder="x">
<input type="number" id="valy" placeholder="y">
<input type="submit" id="smit2">

<table id="table">

</table>

Upvotes: 0

Views: 163

Answers (2)

flx
flx

Reputation: 1578

Since I finished it anyway:

Here is a working example

var irow = document.querySelector('#irow');
var icol = document.querySelector('#icol');
var smit1 = document.querySelector('#smit1');
var valx = document.querySelector('#valx');
var valy = document.querySelector('#valy');
var smit2 = document.querySelector('#smit2');

function GenerateTable() {
  var body = document.getElementsByTagName("body")[0];
  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var i = 0; i < irow.value; i++) {
    var row = document.createElement("tr");

    for (var j = 0; j < icol.value; j++) {
      var cell = document.createElement("td");

      row.appendChild(cell)
    }

    tblBody.appendChild(row);
  }

  tbl.setAttribute('class', 'generated');
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  smit1.disabled = true;
  irow.disabled = true;
  icol.disabled = true;
  smit2.disabled = false;
  valx.disabled = false;
  valy.disabled = false;
}

function SelectCell() {
  var tr = document.getElementsByTagName("tr");
  var td = document.getElementsByTagName("td");
  var rowIndex = valy.value;
  var cellIndex = valx.value;
  var change = document.querySelector('table.generated tbody').children[rowIndex].children[cellIndex];

  change.style.backgroundColor = "red";		
}

smit1.addEventListener('click', GenerateTable);
smit2.addEventListener('click', SelectCell);
table.generated td {
  width: 10px;
  height: 10px;
  border: 1px solid #000000;
}

.width100 {
  width: 100%;
}
<body>
  <div class="width100">
    <input type="number" id="irow" placeholder="rows">
    <input type="number" id="icol" placeholder="cols">
    <input type="submit" id="smit1">
  </div>
  <div class="width100">
    <input type="number" id="valx" disabled="true" placeholder="x">
    <input type="number" id="valy" disabled="true" placeholder="y">
    <input type="submit" id="smit2" disabled="true">
  </div>
</body>

Upvotes: 3

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

I'm not sure you can chain it like this:

var change = document.getElementById("table").tr[rowIndex].td[cellIndex];

I think what you want is:

//grab value from the input x and y
var rowIndex = +document.getElementById('valy').value;
var cellIndex = +document.getElementById('valx').value;

// Get reference to the table
var table = document.getElementById('table');
// Get the tr of the table with the index rowIndex
var tr = table.querySelectorAll('tr')[rowIndex];

// Query the selected row for all column elements and select the one at the needed index
var change = tr.querySelectorAll('td')[cellIndex];

NOTE: It's probably best to validate the values in the input before trying to retrieve the DOM element to ensure the code does not break if the user enters a non integer value or a value which is out of bounds

Upvotes: 4

Related Questions