Member Avatar for feoperro

Hi,

I'm trying to set table cells according to co-ordinates [x][y] - does anyone know if this is possible?

Here's what I've done so far:

<html>
    <head>
        <title>
            Trial & Error - Table Cells
        </title>
    </head>
    <body>
<script type="text/javascript">
            function getRow(t) {
                var col=t.cellIndex; //Gets column number clicked on.
                var row=t.parentNode.rowIndex; //Gets row number clicked on.
                var tableRow = document.getElementById("myRow"); //Gets row clicked on by Id.
                var tableCells = tableRow.getElementsByTagName("td"); //Gets cell inside row that was clicked on.
                document.testForm.inputA.value = (tableCells[0].innerText); //Sets the value of the input area.
//Ideally I'd like something like this: document.testForm.inputA.value = (tableNAME[row][col].innerText);
            }
</script>

<form name="testForm" action='test.html'>
<table border='1' style="background-color:black; color:white">
<tr id="myRow">
                    <td width='150px' onclick="getRow(this)">
                        <b>Test A</b>
                    </td>
</tr>
<tr>
                    <td>
                        <input type='text' name='inputA' value=''/>
                    </td>
</tr>
</table>
</form>
</body>
</html>

Ideally I'd like something like this: document.testForm.inputA.value = (tableNAME[row][col].innerText);

Thanks,
-Ash.

  • 1 Contributor
  • 1 Reply
  • 251 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by feoperro
Member Avatar for feoperro

Nevermind, I found the solution:

<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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.