Convert javascript alertbox to show it on a html textbox

0
votes

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 );
  }
}
2
javascripthtmlhtml-tablecoordinatespure-js
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
Please add the relevant HTML to your question. - Scott Marcus
And don't use document.getElementsByTagName("table")[0] or getElementsByTagName. Instead, use document.querySelector("table") and table.querySelectorAll("td"). - Scott Marcus
Can you post an image of what you are trying to achieve? A paint drawing is fine. - aloisdg

2 Answers

1
votes

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>
0
votes

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>