Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cell Coordinates & InnerText

    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.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.
    Are you a Help Vampire?

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by AshtonHogan View Post
    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 View Post
    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.
    Are you a Help Vampire?

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •