Convert javascript alertbox to show it on a html textbox

Question

I want to show my xy coordinates in html td cell using JavaScript but instead of showing an alert, I want it to be shown in an html textbox

var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td"); // 

for(var i = 1; i < cells.length; i++){

  var cell = cells[i];

  cell.onclick = function(){
    var cellIndex  = this.cellIndex + 1;  

    var rowIndex = this.parentNode.rowIndex + 1;

    alert("X: " + cellIndex + " / Y: " + rowIndex );
  }
}

hi! I want to show my xy coordinates in html td cell using javascript but instead of showing an alert boxI want it to be shown in an html textbox — Vatche Thorossian, Dec 23 '19 at 21:41
And [don't use `document.getElementsByTagName("table")[0]` or `getElementsByTagName`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). Instead, use `document.querySelector("table")` and `table.querySelectorAll("td")`. — Scott Marcus, Dec 23 '19 at 21:44
Can you post an image of what you are trying to achieve? A paint drawing is fine. — aloisdg, Dec 23 '19 at 21:59

Marios Nikolaou · Answer 1 · 2019-12-23T22:38:12.087

I have loop over the td elements and bind click event.So each time you click on td you will see cellIndex and rowIndex.Check my code and let me know if it satisfies you.

var cells = document.querySelectorAll("table td");
for(var i = 0; i < cells.length; i++){
  cells[i].addEventListener('click',showCoordinates);
}
function showCoordinates(){
  var cellIndex  = this.cellIndex + 1;  
  var rowIndex = this.parentNode.rowIndex + 1;
 this.innerHTML = "X:"+cellIndex +" Y:"+rowIndex;
}

table td{ padding:10px; }

<table border="1">
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>TD</td>
  </tr>
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>TD</td>
  </tr>
</table>

aloisdg · Answer 2 · 2019-12-23T22:38:42.417

There are different ways to achieve what I think you want. Feel free to update you question to reflect your will. Adding your HTML as inquired in comment, would be useful.

Lets assume that your table doesn't use rowspan or colspan. Something like this:

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

The basic way with two loops:

// Lets get all your rows
var rows = document.querySelectorAll("table tr");
   
   // for each row...
for (var j = 0; j < rows.length; j++) {
  var row = rows[j];

  // ... we will find all this rows' cells.
  var cells = row.querySelectorAll("td");

  // for each cell...
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];

    // ... we will set its textContent to its coordinate in the table
    cell.textContent = "X: " + (i + 1) + " / Y: " + (j + 1);
  }
}

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Another solution if you know beforehand the number of columns:

var colsCount = document.querySelectorAll("table tr:nth-child(1) td").length;

var cells = document.querySelectorAll("table td");
for (var i = 0; i < cells.length; i++) {
  const y = i / colsCount | 0;
  const x = i % colsCount;
  cells[i].textContent = `X: ${x + 1} / Y: ${y + 1}`;
}

<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Convert javascript alertbox to show it on a html textbox

2 Answers2