在表中使用innerhtml调用

Question

I am trying to use innerHTML to place a dynamic image within a row of a table I have on my page. The image is showing up, however, it is floating to the top of the table for some reason. Is there any way to ensure it stays in the row that I have it in. Here are some snippits of the code:

In the javascript:

document.getElementById("myResults").innerHTML = "";

In the html:

<td class="label"><label for="description">Description:</td>

                                        </tr>
                                        <tr>
                                        <td class="label">
                                            <div class ="<?php echo form_row_class("bio") ?>" >
                                            <div class="styled_textarea">
                                                <textarea type="text" id="bio" onfocus="this.value=''; setbg('#f0f7f8');" onblur="setbg('white')" name="bio" value="<?php echo h($_POST['bio']); ?>" rows="10"></textarea>
                                            </div>
                                            </div>
                                        </td>

                                        </tr>


                                        <tr>
                                        <td class="label"><label for="image"><div class="vspace2em"></div>Image:</label></td>
                                        </tr>
                                        <tr>
                                        <td class="label">

<a id="edit_image"></a>
<div class="row">
<div class="span10 offset1">
<div id="editpane">
<button class="btn btn-large btn-primary openbutton" type="button">Open an Image</button>
</div>
</div>
</div>


                                        </td>



                                        <td>

                                            <?php if($current_user2): ?>

                                                <?php if($current_user2['filepicker'] != ''): ?>

                                                    <img src="<?php echo $current_user2['filepicker'];?>">

                                                <?php endif; ?>

                                            <?php endif; ?>

                                        </td>
                                        </tr>

                                        <tr>

                                         <div id="myResults"></div>

                                        </tr>

etc...

The image called with the innerHTML using floats to the top of the table for some reason, without appearing where I have it situated. Any ideas why this is happening?

Answer 1

It would be more clearer to read if you formatted the HTML table right. From the first glance I see that you have

<tr>
    <div id="myResults"></div>
</tr>

myResults is your relevant div. The problem is you dont have any <td> elements inside the <tr> . I think your code should look like this.

<tr>
    <td>
        <div id="myResults"></div>
    </td>
</tr>

This should give you the desired result.