VPF::задачка на взаимодействие JavaScript и PHP

sugee

Дата 2.3.2006, 12:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Вопрос не совсем умещается в тематику раздела, но проблема именно в яваскрипте.
Показанный внизу код это результат работы PHP-скрипта который выводит данные из таблицы БД такого вида:
________________
id |element | num |
-------------------------
0 | element1 | 1 |
1 | element2 | 2 |
2 | element3 | 3 |
3 | element4 | 4 |
4 | element5 | 5 |
Поле num определяет порядок сортировки элементов выводимых на некоей странице.
Нужно сделать JavaScript с помощью которого можно изменять этот порядок. То что я пока сделал это самый простой вариант - нажимая на кнопку меняем местами два элемента.
Принцип такой: в PHP генерится массив порядковых номеров num

Код


echo "var ElementNum=new Array(); \n";
$q = mysql_query("SELECT * FROM `_order` GROUP BY `element` ORDER BY `num`");
$i=0;
while($r = mysql_fetch_assoc($q)) {
 echo "ElementNum[".$i."]=".$r['num'].";\n";

$i++;
}

По нажатии кнопки "Вверх" текущий и предыдущий элементы этого массива меняются местами. Кнопка "Вниз" будет менять местами текущий и следующий элемент. У меня здесь показано как работает кнопка "Вверх".
В чем собственно проблема: надо чтобы произведенное изменение было сразу видно без перезагрузки страницы. После щелчка допустим по кнопке "Вверх" во второй строке таблицы в этой строке должен оказаться element1, а в предыдущей element2. В базе данных у меня все изменяется как надо, но надо чтобы изменения были видны до отправки измененного массива серверу.

Код


<table border='1'>
<tr height='30'><td>Название элемента</td><td colspan='2'>Переместить на одну позицию</td></tr>
<tr><td>item1</td><td><button onclick=_top(1)>вверх</button>1</td>
     <td align='left'><button onclick=_bottom(1)>вниз</button></td></tr>
<tr><td>item2</td><td><button onclick=_top(2)>вверх</button>2</td>
     <td align='left'><button onclick=_bottom(2)>вниз</button></td></tr>
<tr><td>item3</td><td><button onclick=_top(3)>вверх</button>3</td>
     <td align='left'><button onclick=_bottom(3)>вниз</button></td></tr><tr>
  ...
  ...
  ...
  ...
<tr><td>
      <button onclick=PosArrToPHP()>сохранить</button>
 </td></tr></table>

<script>
var ElementNum=new Array(); 
ElementNum[0]=1;
ElementNum[1]=2;
ElementNum[2]=3;
ElementNum[3]=4;
ElementNum[4]=5;
ElementNum[5]=6;
ElementNum[6]=7;
ElementNum[7]=8;
ElementNum[8]=9;
ElementNum[9]=10;

function ArrToPHP(arr, url) {

    var newurl = url + '?';
    for(var i = 0; i < arr.length; i++) {
        newurl = newurl + '&arr[]=' + arr[i];
    }

    window.location.href = newurl;
}


function _top(num) {

currElement=ElementNum[num-1];
ElementNum[num-1]=ElementNum[num-2];
ElementNum[num-2]=currElement;

}



function PosArrToPHP() {

ArrToPHP(ElementNum, 'http://localhost/order/save_changes.php');

}

</script>

12345c

Дата 2.3.2006, 13:16 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Поиск по форуму "Javascript" - "сортировка таблицы"

sugee

Дата 3.3.2006, 11:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Мне кажется здесь проще каждую строку таблицы заключить в <div>,
каждому <div> присвоить id равное параметру передаваемому в функцию

Код


 <div id='1'>
 <tr><td>element1</td><td><button onclick=_top(1)>вверх</button>1</td>
 <td align='left'><button onclick=_bottom(1)>вниз</button></td></tr>
 </div>
 <div id='2'>
 <tr><td>element2</td><td><button onclick=_top(2)>вверх</button>2</td>
 <td align='left'><button onclick=_bottom(2)>вниз</button></td></tr>
 </div>

А потом с помощью innerHTML можно поменять местами содержимое
<div id='1'> и <div id='2'>.

Идея понятна, но осуществить у меня не получилось, не очень я силён в JavaScript.

sugee

Дата 3.3.2006, 11:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Хотя вот это как раз похоже на мой случай
http://forum.vingrad.ru/index.php?showtopi...st&p=456734

sugee

Дата 3.3.2006, 12:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Код


 <div id='el1'>
 <tr><td>element1</td><td>
<button onclick=_top(1)>вверх</button></td>
 <td align='left'><button onclick=_bottom(1)>вниз</button></td></tr>
 </div>

 <div id='el2'>
 <tr><td>element2</td><td><
button onclick=_top(2)>вверх</button></td>
 <td align='left'><button onclick=_bottom(2)>вниз</button></td></tr>
 </div>

Теперь мне нужно в функции _top() поменять местами текущую и предыдущую строку таблицы.
Получить содержимое <div> с текущим id я пытался так

Код


x = document.getElementById('el'+num).innerHTML;

где num это параметр который передается в функцию, но в переменной x у меня оказывается пустая строка. smile

Это сообщение отредактировал(а) sugee - 3.3.2006, 12:26

Ciber SLasH

Дата 3.3.2006, 16:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Возможно у тебя num другой.
Посмотри что в нём: alert(num)

sugee

Дата 4.3.2006, 00:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Проверил, с параметром все правильно, а как он может быть другим...
Вот так выглядит строка таблицы которую я пытаюсь получить

Код


<div id='el2'>
<tr><td>element2</td><td><button onclick=_top(2)>вверх</button>2</td>
<td align='left'><button onclick=_bottom(2)>вниз</button></td></tr>
</div>

Ciber SLasH

Дата 4.3.2006, 06:57 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(sugee @ 3.3.2006, 12:22

)

Теперь мне нужно в функции _top() поменять местами текущую и предыдущую строку таблицы.

Вот, посмотри, я здесь реализовал перемещение строк:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta http-equiv="MSThemeCompatible" content='Yes'>
<meta name="Generator" content='EditPlus 2.12'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Перемещение строк таблицы</title>
<script type='text/javascript'>
/*** Инициализация необходимых переменных ***/
function initVars() {
    tObj = document.getElementById('example');    // ссылка на элемент TABLE с именем "example"
}

/*** Перемещение строки ***/
function swapRow(src, mode) {
    function swap(src, dst) {
    var srcTmp = src.cloneNode(true);
    var dstTmp = dst.cloneNode(true);
        src.parentNode.insertBefore(dstTmp, src);
        tObj.deleteRow(src.rowIndex);
        dst.parentNode.insertBefore(srcTmp, dst);
        tObj.deleteRow(dst.rowIndex);
    }

    switch (mode) {
        case "up":
            var prevRow = src.rowIndex-1;
            if (prevRow > 0)
                if (window.Node)    swap(src, tObj.rows[prevRow]);
                else    src.swapNode(tObj.rows[prevRow]);

            break;
        case "down":
            var nextRow = src.rowIndex+1;
            if (nextRow < tObj.rows.length)
                if (window.Node)    swap(src, tObj.rows[nextRow]);
                else    src.swapNode(tObj.rows[nextRow]);
    }
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
onload = function () {
    initVars();
}
</script>
<style>
table, td, th {border: 1px solid red; text-align: center}
th {background: lime}
</style>
</head>

<body>
<table id='example' cellspacing="2" cellpadding="2" align="center">
<tr><th colspan="5" style='background: red'>Перемещение строк таблицы</th></tr>
<tr>
    <td>A</td><td>B</td><td>C</td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "up")'>Вверх</button></td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "down")'>Вниз</button></td>
</tr>
<tr>
    <td>D</td><td>E</td><td>F</td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "up")'>Вверх</button></td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "down")'>Вниз</button></td>
</tr>
<tr>
    <td>G</td><td>H</td><td>I</td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "up")'>Вверх</button></td>
    <td><button onClick='swapRow(this.parentNode.parentNode, "down")'>Вниз</button></td>
</tr>
</table>
</body>
</html>

sugee

Дата 4.3.2006, 12:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 423
Регистрация: 12.6.2005

Репутация: нет
Всего: 4

Ciber SLasH, спасибо огромное!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »