#javascript #php #html #css #ajax
#javascript #php #HTML #css #ajax
Вопрос:
У меня есть вопрос, который, я уверен, задавали раньше, но я не смог найти его здесь.
У меня есть ячейка таблицы, которая содержит данные, загруженные из базы данных 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:
Я не могу предоставить вам полный исходный код.
Но, тем не менее, я могу провести вас по шагам:
1) У вас есть по <td>
для каждого данные.
2) Добавьте 2 отдельных элемента: элемент span / div для отображения данных.
3) Другое текстовое поле, скрытое по умолчанию.
4) Сначала загрузите span / div с данными.
5) Скажите, что он имеет id="name"
6) Щелкнув по ней, отобразите текстовое поле.
7) Получаем текущий идентификатор, добавляем к нему ‘-text’.
8) Это будет id
редактируемый элемент.
9) Теперь у вас может быть редактируемый <td>
.
10) При размытии текстового поля запустите AJAX-запрос для сохранения значения в базе данных.
11) Кроме того, скройте текстовое поле и покажите соответствующий диапазон / div (конечно, с обновленным значением.)
Надеюсь, это сработает.
Комментарии:
1. Спасибо. Я не уверен, что вполне понимаю, но попробую. Ценю вашу помощь.