Member Avatar for feoperro

Hi,

I'm trying to do the following:
1. Click on a row (ANY cell of that row)
2. Depending on where I clicked, a javascript function should get the value of EACH cell in THAT row, and populate it to text boxes.

Below is my code thus far:

<html>
    <head>
        <title>
            Trial & Error - Table Cells
        </title>
    </head>
    <body>
        <script type="text/javascript">
            function getRow(t) {
                var col=t.cellIndex;
                var row=t.parentNode.rowIndex;
                var tableRow = document.getElementById("selectRow");
                var tableCells = tableRow.getElementsByTagName("td");
                document.testForm.inputA.value = (tableCells[0].innerText);
                document.testForm.inputB.value = (tableCells[1].innerText);
                document.testForm.inputC.value = (tableCells[2].innerText);
                document.testForm.inputD.value = (tableCells[3].innerText);
                document.testForm.inputE.value = (tableCells[4].innerText);
                document.testForm.inputF.value = (tableCells[5].innerText);
                document.testForm.inputG.value = (tableCells[6].innerText);
            }
        </script>
        <form name="testForm" action='test6.html'>
            <table border='1' style="background-color:black; color:white">
                <tr id="selectRow">
                    <td width='150px' onclick="getRow(this)">
                        <b>Test A</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test B</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test C</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test D</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test E</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test F</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test G</b>
                    </td>
                </tr>
                <tr>
                    <td width='150px' onclick="getRow(this)">
                        <b>Test 1</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 2</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 3</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 4</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 5</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 6</b>
                    </td>
                    <td onclick="getRow(this)">
                        <b>Test 7</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='text' name='inputA' value=''/>
                    </td>
                    <td>
                        <input type='text' name='inputB' value=''/>
                    </td>
                    <td>
                        <input type='text' name='inputC' value='' />
                    </td>
                    <td>
                        <input type='text' name='inputD' value='' />
                    </td>
                    <td>
                        <input type='text' name='inputE' value='' />
                    </td>
                    <td>
                        <input type='text' name='inputF' value='' />
                    </td>
                    <td>
                        <input type='text' name='inputG' value='' />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Everything works perfectly EXCEPT that I cannot utilise this with more than one row. Could someone please test this and tell me how I can make it more dynamic?

Say for example I was dynamically generating table rows and it would be unknown to me how many rows there would be until the program ran; how would I be able to make this function detect which information to populate into input areas?

Thanks a lot,
-Ash

  • 2 Contributors
  • 2 Replies
  • 157 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dukane
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.