скрипт таблицы - JavaScript, Ajax

Aden · 17.08.2011, 01:05

Ребята помогите разобраться с созданием редактируемой таблицы. Нужно создать таблицу с редактируемыми ячейками. По щелчку на ячейку открывалась форма редактирования в самой ячейке,для первого столбца получается, а как сделать для другого не знаю...
index.php

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>

Aden · 17.08.2011, 01:07

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 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>");
        }
}

17.08.2011, 01:05	#1
Aden Новичок Джуниор Регистрация: 17.08.2011 Сообщений: 2	скрипт таблицы Ребята помогите разобраться с созданием редактируемой таблицы. Нужно создать таблицу с редактируемыми ячейками. По щелчку на ячейку открывалась форма редактирования в самой ячейке,для первого столбца получается, а как сделать для другого не знаю... index.php 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>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Access ограничить значение поля таблицы значениями полей другой таблицы	Сергей089	Microsoft Office Access	10	08.12.2010 02:22
скрипт соединение веб браузера и таблицы Excel	verter1990	Фриланс	3	09.02.2010 13:14
мой сайт взломали и в коды скриптов добавили вот этот скрипт. Что за скрипт?	nsbox	JavaScript, Ajax	9	21.01.2010 18:19
Данные из двух полей исх. таблицы в одно поле сводной таблицы	Strelec79	Microsoft Office Excel	2	02.08.2009 13:59
Скрипт pop Under (скрипт попандера)	Jensi	JavaScript, Ajax	2	13.07.2009 00:17