Inserting Cells Into A Table?

How do i go about inserting a cell into a table?

For example, i retrieve data from a database using MySql and PHP, how do i then go about inserting a cell into an already scripted table?

In my case, how would i insert a cell into a row 150 pixels from th开发者_运维百科e start of the row?

example:

 ___________________________________________
| <--150px-->  |cell|                      |

The easiest way is to generate the table with the extra cell already in place before sending it to the user.

After that, you'll have to use some Javascript to dynamically insert the new cell into the page's DOM tree. Given a table snippet as follows:

<table>
<tr>
    <td>foo</td>
    <td id="inserthere">bar</td>
</tr>
</table>

You could use something along the following lines:

var td = document.createElement('td');
td.nodeValue = 'this is the new cell';
document.getElementById('inserthere').insertBefore(td);

which would give you:

<table>
<tr>
    <td>foo</td>
    <td>this is the new cell</td>
    <td id="inserthere">bar</td>
</tr>
</table>

If you're going to be doing bulk manipulation of the DOM tree like this, you'd be better off using jQuery or MooTools, which can do things like this in one line of code, plus give you more control over where the new node is inserted (before, after, top, bottom, etc...).

As for the 150 pixel offset, you can use CSS styling to cover that. Some padding or a margin will do the trick.

Also remember that if the table you're inserting into uses row or column spans, the new cell will undoubtedly break the layout horribly.

<td style='padding-left:150px;'><?php echo fetched data?></td>