Javascript - как разместить изображение в таблице

Question

Я пытаюсь поместить "случайное" изображение в столбец таблицы. В основном, я выбираю изображение, основываясь на секунде, когда страница загружена - так доступно 60 изображений. Изображение выбирается и отображается, но располагается на краю страницы, а не на краю таблицы.

Я хожу по кругу. Любые советы о том, как этого добиться, пожалуйста? Я пишу на HTML4 - я очень мало знаю о HTML5. Размер ширины изображения составляет 480 пикселей, ширина столбца в таблице - 615 пикселей.

Вот мой код с закомментированными отладками.

Спасибо Мартын

Вступление

<script>

var d = new Date();
var n = d.getSeconds();
var n = "hdrimages/"+n+".jpg"
var img = document.createElement("img");
img.src = n

//document.getElementById("hdrimage").innerHTML = img.src;
//document.getElementById("hdrimage").style.cssFloat = "right";
//hdrimage.style.float = “right”;

document.body.appendChild(img);

</script>

</td>
<td width="40%" align="left" valign="top"> 
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2></td>

Answer 1

Вы можете сделать что-то вроде следующего

<table>
  <tr>
    <td id="img-cell"></td>
  </tr>
</table>

и на части JS вы можете сделать

document.getElementById('img-cell').appendChild(img);

Answer 2

Это потому, что вы добавляете изображение к телу, а не к элементу таблицы.

Answer 3

Ваш текущий код только добавляет изображение в конец тега body. Вам необходимо добавить свое изображение в тег ячейки данных таблицы. Для этого присвойте ячейке данных таблицы идентификатор, чтобы ее можно было найти, после чего ее легко добавить:

<td id="myawesometabledatacell" width="40%" align="left" valign="top"> 
  <h2>Upcoming Events</h2>
  <hr>
  <h2>News</h2>
</td>

<script>
var d=new Date();
var n=d.getSeconds();
var n='hdrimages/'+n+'.jpg'
var img=document.createElement('img');
img.src=n
document.getElementById('myawesometabledatacell').appendChild(img);
</script>

Надеюсь, это поможет.