Aden
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Aden
-
-
Так что нужно изменить, добавить?
-
Ребята помоги разобраться с созданием редактируемой таблицы. Нужно создать таблицу с редактируемыми ячейками. По щелчку на ячейку открывалась форма редактирования в самой ячейке,для первого столбца получается, а как сделать для другого не знаю...
index.php
<?php
require_once("scripts/dbdata.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>WebListEditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="scripts/libs/prototype.js"></script>
<script type="text/javascript" src="scripts/libs/scriptaculous.js?load=effects,controls"></script>
<script type="text/javascript" src="scripts/tasks.js"></script>
</head>
<body>
<?php $con = connect(); ?>
<div id="content">
<?php
$res = mysql_query("SELECT * FROM listitems");
if ($res === FALSE) {
echo "Ошибка при отправке запроса к БД:".mysql_error();
}
elseif (mysql_num_rows($res) == 0) {
echo "<div id=\"noItems\">Записей нет</div>";
}
else {
?>
<p><b>Справочник пользователей:</b></p>
<ul id="list">
<?php
$i = 0;
while ($item = mysql_fetch_array($res, MYSQL_ASSOC)) {
$i++;
?>
<li id="listNum_<?php echo $i - 1; ?>">
<table width="70" border="1">
<tr>
<td width="70">
<div class='itemNum'><?php echo $i; ?></div>
</td>
<td width="120">
<div class='itemValue' onclick='closeOtherEditors(<?php echo $i - 1; ?>)'
id="itemId_<?php echo $item['id']; ?>"><?php echo $item['item']; ?></div>
</td>
<td>
<div class='utemValue' onclick='closeOtherEditors(<?php echo $i - 1; ?>)'
id="utemId_<?php echo $utem['id']; ?>"><?php echo $item['utem']; ?></div>
</td>
</tr>
</table>
</a>
<script type="text/javascript">
editors.push(addEditor("itemId_<?php echo $item['id'];?>",
"<?php echo $item['id'];?>"));
</script>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</div>
<?php
mysql_free_result($res);
mysql_close($con);
?>
<form action="#" id="add_item_form">
<p>
<label for="item_value"></label>
<input type="text" id="item_value" size="20" />
<input type="text" id="utem_value" size="20" />
<input type="button" value="Добавить" onclick="addItem()" />
</p>
</form>
</body>
</html>task.js
//глобальный массив для хранения редакторов
var editors = [];
//эта функция создает редактор для заданного элемента
function addEditor(item, id) {
return new Ajax.InPlaceEditor(item,
"scripts/updateitem.php",
{
highlightcolor: "#ffffff",
size: "4",
savingText: "Сохраняю...",
callback: function(form, value) {
return "value=" + value + "&id=" + id;
}
});
}
////////////
function addEditor(utem, id) {
return new Ajax.InPlaceEditor(utem,
"scripts/updateitem.php",
{
highlightcolor: "#ffffff",
size: "4",
savingText: "Сохраняю...",
callback: function(form, value) {
return "value=" + value + "&id=" + id;
}
});
}
///////////////
//эта функция добавляет элемент в список
function addItem() {
//читаем введенное в форму значение
var v = $('item_value').value;
//формируем строку с параметрами запроса
var pars = $H({value:v}).toQueryString();
//выполняем запрос
new Ajax.Request(
"scripts/additem.php",
{method:"post", parameters:pars, onSuccess:parseAddItemResponse}
);
}
//эта функция вызывается если запрос на добавление нового
//элемента в список был выполнен
function parseAddItemResponse(transport) {
var data = eval('(' + transport.responseText + ')');
//проверяем были ли ошибки
if (data.error_mes == null) {
//удаляем сообщение об ошибке (если оно осталось после
//предыдущего вызова)
var errMes = $('err_mes');
if (errMes != null) {
Element.remove(errMes);
}
//удаляем строку "нет записей" (если она есть)
var noItems = $('noItems');
if (noItems != null) {
Element.remove(noItems);
}
//вставляем полученный результат в конец списка
var list = $('list');
if (list == null) {
var content = $('content');
var newItem = new Insertion.Bottom(content, "<ul id=\"list\"></ul>");
list = $('list');
}
//вставляем новый элемент в конец списка
new Insertion.Bottom(list,
"<li id='listNum_" + (editors.length) + "'><div class='itemNum'>" +
(editors.length + 1) + "</div>" +
"<div class='itemValue' " +
"onclick='closeOtherEditors(" + editors.length +
")' id='itemId_" + data.id + "'>" +
data.value + "</div>" +
"<a href='#' class='deleteLink' onclick='deleteItem(" +
data.id + ")'><img src='css/images/delete.gif'" +
"alt='Удалить' title='Удалить' /></a></li>");
//создаем редактор для нового элемента и добавляем его в массив
editors.push(addEditor("itemId_" + data.id, data.id));
//подсвечиваем вставленный элемент
var items = $$('#list li');
new Effect.Highlight(items.last(),
{startcolor:"#FDFFB9", endcolor:"#FFFFFF", duration:2.0});
}
else {
//выводим сообщение об ошибке
var form = $('add_item_form');
new Insertion.After(form, "<div id=\"err_mes\">" +
data.error_mes + "</div>");
}
}
//эта функция удаляет элемент списка
function deleteItem(id) {
var pars = $H({itemid:id}).toQueryString();
new Ajax.Request(
"scripts/delete.php",
{method:"post", parameters:pars,
onSuccess:function(transport) {
var data = eval('(' + transport.responseText + ')');
//удаляем элемент из списка
var listElem = $('itemId_' + data.deletedId).parentNode.getAttribute('id');
Element.remove(listElem);
var listNum = listElem.substring(8);
//обновляем номера у всех остальных записей
var nodes = $$('#list li');
nodes.each(
function(node, index) {
if (index >= listNum) {
node.setAttribute('id', 'listNum_' + index);
var innerNodes = $A(node.getElementsByTagName('div'));
innerNodes[0].innerHTML = index + 1;
innerNodes[1].setAttribute("onclick", "closeOtherEditors(" + index + ")");
}
}
);
//удаляем редактор из массива
editors.splice(listNum,1);
}}
);
}
function closeOtherEditors(curEditor) {
editors.each(
function(editor, index) {
if (index != curEditor) {
editor.leaveEditMode();
}
}
);
}
редактируемая таблица
in JavaScript
Posted
что значит url: 'обработчик на сервер'.
Может есть пример, хоть на одной ячейке таблицы.