Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > задачка на взаимодействие JavaScript и PHP


Автор: sugee 2.3.2006, 12:17
Вопрос не совсем умещается в тематику раздела, но проблема именно в яваскрипте.
Показанный внизу код это результат работы 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
Поиск по форуму "Javascript" - "http://forum.vingrad.ru/index.php?act=Search&CODE=show&searchid=5a924cbe79434d08e270512156b12e8e&search_in=posts&result_type=topics&flag=search&debug=&highlite=%F1%EE%F0%F2%E8%F0%EE%E2%EA%E0+and+%F2%E0%E1%EB%E8%F6%FB&skipped="

Автор: sugee 3.3.2006, 11:08
Мне кажется здесь проще каждую строку таблицы заключить в <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
Хотя вот это как раз похоже на мой случай
http://forum.vingrad.ru/index.php?showtopic=57341&view=findpost&p=456734

Автор: sugee 3.3.2006, 12:22
Код

 <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

Автор: Ciber SLasH 3.3.2006, 16:21
Возможно у тебя num другой.
Посмотри что в нём: alert(num)

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

<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
Цитата(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
Ciber SLasH, спасибо огромное!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)