Блог

У меня есть вопрос, который, я уверен, задавали раньше, но я не смог найти его здесь.

У меня есть ячейка таблицы, которая содержит данные, загруженные из базы данных mysqli — я ограничил размер ячейки с помощью css

     .hideContent {
        overflow: auto;
        line-height: 1em;
        height: 4em;
    }

    .showContent {
        overflow: auto;
        line-height: 1em;
        height: 40em;
    }
  

Для того, чтобы работать, мне нужно обернуть <div> внутри <td> вот так:

 <td> <div class="hidecontent"> </div> </td>
  

Проблема в том, что эта ячейка также доступна для редактирования, поэтому, когда я редактирую td, данные, сохраненные в базе данных mysqli, содержат <div> тег. Я делаю это, используя чужой код, который я нашел в Интернете, извините, что не указал, я не могу вспомнить, где я его взял.

             <div class="hideContent">
                <td contenteditable="true" onBlur="saveToDatabase(this,'summary','<?php echo $result['id']; ?>','<?php echo $_GET['customer'] ?>','corr')">
                    <?php echo $result['summary']?>
                </td>
            </div>

function saveToDatabase(editableObj,column,id,cust_name,db) {
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "saveedit.php",
        type: "POST",
        data:'column=' column 'amp;editval=' editableObj.innerHTML 'amp;id=' id 'amp;cust_name=' cust_name 'amp;db=' db,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        }        
    });
}
  

И пока я здесь, я также хочу изменить класс на «showContent» onClick. Надеюсь, вы сможете мне помочь 🙂

Подводя итог: мне нужна редактируемая ячейка таблицы (данные в mysqli db и из нее), которая также может динамически изменять стили css. Возможно ли это?

Спасибо!

Я не могу предоставить вам полный исходный код.

Но, тем не менее, я могу провести вас по шагам:

1) У вас есть по <td> для каждого данные.

2) Добавьте 2 отдельных элемента: элемент span / div для отображения данных.

3) Другое текстовое поле, скрытое по умолчанию.

4) Сначала загрузите span / div с данными.

5) Скажите, что он имеет id="name"

6) Щелкнув по ней, отобразите текстовое поле.

7) Получаем текущий идентификатор, добавляем к нему ‘-text’.

8) Это будет id редактируемый элемент.

9) Теперь у вас может быть редактируемый <td> .

10) При размытии текстового поля запустите AJAX-запрос для сохранения значения в базе данных.

11) Кроме того, скройте текстовое поле и покажите соответствующий диапазон / div (конечно, с обновленным значением.)

Надеюсь, это сработает.