Позиционирование внутри таблицы HTML - PullRequest
Новая
       9

Позиционирование внутри таблицы HTML

0 голосов
/ 21 августа 2009

У меня есть HTML-таблица, внутри которой у меня есть кнопка отправки. Теперь я вызываю функцию в своем файле JavaScript, которая должна создать капчу, и помещаю ее на страницу HTML в таблице, где у меня есть кнопка отправки.

А в JavaScript я делаю document.write() и вставляю изображение из файла JavaScript в HTML-страницу. Теперь я хочу и это изображение, и отправить в одной таблице, но отправка должна быть на странице HTML, а изображение должно быть только в файле JavaScript. К сожалению, изображение вставлено где-то внизу страницы. Я не понимаю, как работает это позиционирование. Есть ли какое-нибудь решение, где я могу поместить их в одну и ту же таблицу, несмотря на то, что оба элемента управления находятся в отдельных файлах?

Пример кода:

на странице HTML: кнопка отправки находится внутри таблицы в теге формы ...

в файле JavaScript: 

document.write("img position=\"relative\" src=\"" + decodeURIComponent(imgdir) + imgid + ".jpg\" height=\"50\" width=\"100\" align=\"left\" style=\"margin-left: 4px;\" height=\"80\");
}

Ответы [ 3 ]

2 голосов
/ 21 августа 2009

Вы можете попытаться определить тег html img, где вы хотите, чтобы он был в таблице, и просто скрыть его в стиле css, пока вы не установите источник с помощью своего JavaScript. Вы также должны установить идентификатор для этого, чтобы получить доступ в JavaScript.

В таблице вы определяете ячейку html-таблицы следующим образом: 

<td>
  <!-- Your submit button goes here... --> 
  <img id="imagePlaceholder" style="display:none;margin-left:4px;" height="50" width="100" align="left" /> 
</td>

В JavaScript вы делаете это: 

var image = document.getElementById("imagePlaceholder");
image.src = decodeURIComponent(imgdir) + imgid + ".jpg" ;
image.style.display = "inline";  // Make the image tag visible
0 голосов
/ 21 августа 2009

document.write() добавляет HTML в конец страницы. Вы, вероятно, хотите использовать что-то вроде appendChild(), чтобы вставить свое изображение в нужную ячейку таблицы. Например: 

var img = document.createElement('img');
img.src = decodeURIComponent(imgdir) + '.jpg';
// set the rest of the attributes...
var imgTd = document.getElementsById('imgDestination');
imgTd.appendChild(img);

Некоторые предложения:

  • Используйте библиотеку JavaScript, такую ​​как jQuery - она ​​делает подобные вещи тривиальными.
  • Перемещение стиля изображения от элемента в элемент <style> или внешний файл CSS.
0 голосов
/ 21 августа 2009

В дополнение к предыдущему комментарию я бы категорически избегал использования document.write, поскольку он так легко нарушает семантику HTML. Я бы предложил всегда использовать innerHTML для написания элементов и их динамического заполнения. innerHTML не является стандартом, но он в 2,5-3,5 раза быстрее, чем использование методов DOM. Я также настоятельно рекомендую проверить ваш динамически сгенерированный HTML-код, чтобы обнаружить недостатки, представленные вашим JavaScript.

...