Как разместить невидимый вход в каждой ячейке таблицы

Question

0

У меня есть эта таблица, которая должна выглядеть так:

С изменением значений ячеек.

Но внутри каждой ячейки я хочу <input type="number"> со значением ячейки, и если я нажму на нее, я могу изменить значение.

Самая важная часть - стиль. Как я могу стилизовать таблицу с помощью ввода, чтобы она выглядела одинаково?

Теперь каждая ячейка состоит из:

<td>
    <div>
        <p>Cell title</p>
        <p onclick="change(this);">Cell value</p>
    </div>
</td>

Может кто-нибудь мне помочь?

Italo Ayres 18 сен. 2013, в 18:48

Теги:

html-table

3 ответа

1

Если вы согласны с решением html5, вы можете использовать атрибут contenteditable:

Поддержка браузера на самом деле удивительно неплоха. Даже IE поддерживает его.

В основном это:

<div>
    <p>Cell title</p>
    <p contenteditable="true">Cell value</p>
</div>

kenttam 18 сен. 2013, в 14:59

0

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

enapupe 18 сен. 2013, в 14:52

mdesdev · Accepted Answer · 2013-09-18T13-56-00.000Z

Если вы хотите добавить входные данные в ячейки таблицы... здесь Fiddle

input {
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  text-align: center;
}

Результат скрипта