Блог

Главная - Вопросы по программированию - Как управлять шириной ячейки таблицы при вставке поля ввода с помощью jQuery

Как управлять шириной ячейки таблицы при вставке поля ввода с помощью jQuery

#jquery #css #html-table #air #webkit

#jquery #css #html-таблица #air #webkit

Вопрос:

У меня есть функция редактирования на веб-странице, предназначенной для webkit. HTML тривиален.

Я прикрепляю обработчик щелчка к каждой ячейке с помощью jQuery:

 $("table td").click(editMe);

function editMe(e) {
  var w = $(this).width();  // returns cell width
  $(this).html("<span>Foo</span");  // does not change table width
  $(this).html('<input type="text" />');  // CAUSES CELL width to BLOW UP! (gets VERY wide)

  var in = $('<input type="text" />');
  in.width(w-10);
  $(this).html(in);    // CAUSES CELL WIDTH TO BLOW UP!  (nearly doubles)
}

Кажется, что никакая настройка ширины не имеет НИКАКОГО значения. У ввода нет отступов или полей, нет границ. Ширина ячейки таблицы просто уменьшается. Основное внимание уделяется Webkit (Safari / Adobe AIR). Но ПОЧЕМУ?

Как я могу добиться, чтобы размеры входных данных соответствовали ячейке таблицы, в которую они вставляются?

Комментарии:

1. Во-первых, прикреплять клик к каждому td — это плохая идея. Прикрепите обработчик к таблице с помощью делегата. Во-вторых, если вы соберете jsfiddle.net Я был бы намного более готов помочь.

Ответ №1:

Хорошо, я не получил точного ответа, но оказывается, что виновник лежит в файле reset.css CSS-фреймворка 960Grid. Я не знаю точно, какой параметр вызвал странное поведение, но удаление этого файла исправило его.

960Grid — это простой CSS-фреймворк, с которым мне нравится работать, но что-то в их файле reset.css привело к тому, что мои таблицы взорвались. Как только я удалил этот файл, таблицы вели себя так, как ожидалось.