За последние 24 часа нас посетили 17811 программистов и 1627 роботов. Сейчас ищет 1261 программист ...

Редактирование таблицы с помощью div contenteditable

Тема в разделе "HTML и CSS", создана пользователем Fr1ar, 22 сен 2009.

  1. Fr1ar

    Fr1ar Активный пользователь

    С нами с:
    22 сен 2009
    Сообщения:
    4
    Симпатии:
    0
    Подскажите пожалуйста как можно сделать редактирование полей таблицы с помощью div contenteditable = true?
    HTML:
    1.  <tr>
    2.   <td>
    3.    <div contenteditable style="width:100%;height:100%"><? value1(); ?></div>
    4.   </td>
    5.   <td>
    6.    <div contenteditable style="width:100%;height:100%"><? value2(); ?></div>
    7.   </td>
    8.  </tr>
    9. </html>
    Если функция value1() или value2() возвращает пустое значение, то высота div'a равна 0!
    Соответственно возникает вопрос:
    1. Как можно растянуть пустой div по высоте на 100%?
    2. Если этого сделать нельзя, то подскажите альтернативный способ редактирования ячеек таблицы? Через input и textarea получается не очень хорошо, т.к. там фиксированное количество строк, а мне нужно что поле растягивалось по содержимому на 100% без скроллов.
     
  2. nimistar

    nimistar Активный пользователь

    С нами с:
    30 май 2007
    Сообщения:
    919
    Симпатии:
    0
    например:
    HTML:
    1.         <form method="POST"  accept-charset="UTF-8">
    2.             <div id="data_conten"
    3.                     style="border:2px solid #C9C9C9;width:600px;height:600px;overflow:scroll;"
    4.                     contenteditable="true"
    5.                     onKeyUp="document.getElementById('post_content').value=this.innerHTML;"
    6.             ></div>
    7.             <input type="hidden" value="" name="content" id="post_content">
    8.             <input type="submit" value="Преобразовать" name="CopyPast"
    9.                     onClick="document.getElementById('post_content').value=document.getElementById('data_conten').innerHTML;">
    10.  
    11.         </form>
    12.  

    для относительных размеров стоит правильно задавать и размеры предыдущих контенейров
    то есть у тебя надо указывать верно размеры и для TD и для TABLE и т.д.
     
  3. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    посмотреть высоту родителя и присвоить диву эту высоту.
     
  4. php-voin

    php-voin Активный пользователь

    С нами с:
    5 дек 2008
    Сообщения:
    10
    Симпатии:
    0
    Адрес:
    Юг России
    Спасибо за информацию.
    Первый раз прочитал об этом свойстве дива.
    Буду активно использовать!