[SOLVED] Inserting rows into a table

[elgoog]

I am struggling in getting some data from AJAX to appear in the right location

 

<table>
  <tr>
    <td><a  onClick="getData(1)">get data</a></td><td>Data</td><td>Data</td>
  </tr>
  <div id="1"></div>
  <tr>
    <td><a  onClick="getData(2)">get data</a></td><td>Data</td><td>Data</td>
  </tr>
   <div id="2"></div>
</table>

 

Ajax - if getData(1) is run. It returns

 

<tr><td>My Data</td><td>My Data</td><td>My Data</td></tr>

 

and uses the following to place this within the <div id="1"></div> tags.

 

document.getElementById(1).innerHTML=req.responseText;

 

Except the data does not appear as a new row, it appears above the table.

 

If i paste <div id="1"><tr><td>My Data</td><td>My Data</td><td>My Data</td></tr></div> into the right place, the table shows up fine, but not when brought in using AJAX.

 

If anyone can shed some light on this, that would be great.

 

[fanfavorite]

The simple answer is that a div is not allowed to be there.  It will not work in all browsers, so I would stop trying to get it to work this way.  You could probably change the div to a <tr id="1" style="display:none"><td></td></tr> and change the style to display: block when you add the data.  Another way is to set a table id and call a function like: 

 

function adddata() {

var tblBody = document.getElementById('TABLE ID').tBodies[0];

var newRow = tblBody.insertRow(-1);

var newCell0 = newRow.insertCell(0);

newCell0.innerHTML = 'Table Data';

}

[elgoog]

Thanks for looking at this FanFavorite

 

What i am basically trying to acheive.

 

Is to have a table displaying all rows from 'table 1'

 

Each row in table 1 may have multiple rows associated with it in 'table 2'

 

 

When i run the function, by clicking the relevant expand button,  on that row, it should call the information from the database using an external php file, and place the information in rows below the right row that was clicked on.

 

The function below

 

        var tblBody = document.getElementById('table1').tBodies[0];

        var newRow = tblBody.insertRow(-1);

        newRow.innerHTML = req.responseText;

 

This will place the information correctly as it pulls from external file as <td></td><td></td>

 

However it places it at the bottom of the table and not below the correct row.

 

I have tried passing the row number to the function and using the index for the right row number, however this does not take into account additional rows that are inserted.

 

[elgoog]

After lots of experimenting, i finally figured this out.... Topic Solved.