Cell Coordinates & InnerText

AshtonHogan · 08-27-2009, 01:09 PM

Hi,

I would like to SET input areas with cell data. The problem I'm having, however, is that I cannot find a way to get a specific cell's content.

I would like something like this:

Code:

var x=1;
var y=2;
inputArea ABC = document.getElementById("MYTABLE")[x][y].innerText;

I've been searching for hours on this, if someone could help I'd really appreciate it!

Thanks a lot,
Ashton.

tomws · 08-27-2009, 02:04 PM

You haven't mentioned anything about a specific JavaScript framework, so I'm not sure why you selected this subforum. You may want to ask a moderator to move it up to the top-level JavaScript forum so you get more responses.

Try assigning a location-specific ID to each cell and then using getElementById to find it. Something like this:

Code:

<!-- IDs must start with a letter or underscore -->
<table>
  <tr>
    <td id="_0x0">a</td><td id="_0x1">b</td><td id="_0x2">c</td>
  <tr>
  <tr>
    <td id="_1x0">d</td><td id="_1x1">e</td><td id="_1x2">f</td>
  <tr>
  <tr>
    <td id="_2x0">g</td><td id="_2x1">h</td><td id="_2x2">i</td>
  <tr>
</table>

Something like this would be easy to generate programmatically, and since IDs are related to location, the desired cell location should be easy to find.

AshtonHogan · 08-27-2009, 03:30 PM

You see, I cannot set Id's because the table rows are dynamically generated and there will be an X amount. Is there no way of doing something similar to the line of code I mentioned above?

Code:

inputArea ABC = document.getElementById("MYTABLE")[x][y].innerText;

I would prefer not to generate table row id's for every single row while it's being generated...

tomws · 08-27-2009, 04:27 PM

Quote:

Originally Posted by AshtonHogan

You see, I cannot set Id's because the table rows are dynamically generated and there will be an X amount.

Of course you can - and exactly because it's being generated dynamically.

Quote:

Originally Posted by AshtonHogan

Is there no way of doing something similar to the line of code I mentioned above?

Code:

inputArea ABC = document.getElementById("MYTABLE")[x][y].innerText;

I was going to say no, but I had a look around the web and found something you might try:

Code:

/*edit me to fit your needs*/
document.getElementById('rt').rows[1].cells[0]

No idea if it'll work - never tried it or had any use for it myself. If not, you'll need to look at walking the document, I think. Have a look around for parentNode, childNodes, getElementsByTagName - all dumped into some nice loops, too.

AshtonHogan · 08-27-2009, 04:30 PM

Nevermind, I found the solution:

Code:

<html>
<head><title></title></head>
<body>
<script type="text/javascript">
            function getRow(t) {
                var col=t.cellIndex;
                var row=t.parentNode.rowIndex;
                var testTable = document.getElementById("testTable");
                alert(testTable.rows[row].cells[col].innerHTML);
            }
</script>

 <table id="testTable" border='1' style="background-color:black; color:white">
                <tr>
                    <td width='150px' onclick="getRow(this)">
                       test 1
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test B</b>
                    </td>
                </tr>
                <tr>
                    <td width='150px' onclick="getRow(this)">
                       test 2
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test B</b>
                    </td>
                </tr>
</table>
</body>
</html>

My only question now is:
Is there a better way to retrieve cell data than innerHTML ? I tried "data" but it returns "[object]"... When I use innerHTML it returns the html tags, along with the text, and I only want the text...

Thanks.