Using innerhtml call within a table

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?

shishirmk · Accepted Answer · 2013-04-18 23:47:05Z

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.

answered Apr 18, 2013 at 23:47

shishirmk

4252 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using innerhtml call within a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related