| |
|
|
| | Помогите пожалуйста... никак не могу разобраться
Есть таблица
<table class="sortTable">
<thead>
<th>#</th>
<th>Цвет</th>
<th>Размер</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Красный</td>
<td>5m</td>
</tr>
<tr>
<td>2</td>
<td>Зеленый</td>
<td>20m</td>
</tr>
<tr>
<td>3</td>
<td>Синий</td>
<td>10m</td>
</tr>
<tr>
<td>4</td>
<td>Белый</td>
<td>1m</td>
</tr>
<tr>
<td>5</td>
<td>Черный</td>
<td>15m</td>
</tr>
</tbody>
</table>
|
Нужно сделать возможность перемещения строк таблицы кнопками "вверх" и "вниз".. | |
| |
|
|
| |
|
|
| |
для: FroNiTy
(21.01.2011 в 13:11)
| | | а что вы пробовали сделать для того чтобы у вас это получилось? | |
| |
|
|
| |
|
|
| |
для: neokortex
(21.01.2011 в 15:39)
| | | ничего толком в голову и не лезло (( | |
| |
|
|
| |
|
|
| |
для: FroNiTy
(21.01.2011 в 16:59)
| | | А кнопки ("Вверх" и "Вниз") куда планируете вставить? | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(21.01.2011 в 17:08)
| | | напротив строк..
<tr>
<td>1</td>
<td>Красный</td>
<td>5m</td>
<td>Вверх</td>
<td>Вниз</td>
</tr>
|
| |
| |
|
|
| |
|
|
| |
для: FroNiTy
(21.01.2011 в 17:15)
| | |
<script>
function myFunc (cell)
{
var direct = (cell.cellIndex == 3);
var row = cell.parentNode, row_ = row.cloneNode (1), tbl = row.parentNode;
if (direct && row.rowIndex > 1)
{
var rowup = tbl.rows [row.rowIndex - 1]; rowup_ = rowup.cloneNode (1);
tbl.replaceChild (row_, rowup); tbl.replaceChild (rowup_, row);
}
if (!direct && row.rowIndex < tbl.rows.length - 1)
{
var rowdown = tbl.rows [row.rowIndex + 1]; rowdown_ = rowdown.cloneNode (1);
tbl.replaceChild (row_, rowdown); tbl.replaceChild (rowdown_, row);
}
}
</script>
<table class="sortTable">
<tr>
<th>#</th>
<th>Цвет</th>
<th>Размер</th>
<th colspan="2"> </td>
</tr>
<tr>
<td>1</td>
<td>Красный</td>
<td>5m</td>
<td onclick="myFunc (this)">Вверх</td>
<td onclick="myFunc (this)">Вниз</td>
</tr>
<tr>
<td>2</td>
<td>Зеленый</td>
<td>20m</td>
<td onclick="myFunc (this)">Вверх</td>
<td onclick="myFunc (this)">Вниз</td>
</tr>
<tr>
<td>3</td>
<td>Синий</td>
<td>10m</td>
<td onclick="myFunc (this)">Вверх</td>
<td onclick="myFunc (this)">Вниз</td>
</tr>
<tr>
<td>4</td>
<td>Белый</td>
<td>1m</td>
<td onclick="myFunc (this)">Вверх</td>
<td onclick="myFunc (this)">Вниз</td>
</tr>
<tr>
<td>5</td>
<td>Черный</td>
<td>15m</td>
<td onclick="myFunc (this)">Вверх</td>
<td onclick="myFunc (this)">Вниз</td>
</tr>
</table>
|
Примечания:
1. Цифра 3 в самом начале функции - индекс (номер в строке, если начинать с нулевого) ячейки с надписью "Вверх"
2. Теги <TBODY> и <THEAD> из HTML-кода изъяты за ради сокращения скриптового кода.
Замечание:
Тег <THEAD> виртуально определяет часть таблицы, являющуюся заголовком - только и всего.
Этот тег не являет собою замену тега <TR>. Внутри тега <THEAD> должны быть как <TR>, так и <TD> и <TH>. | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(21.01.2011 в 20:40)
| | | примного благодарен! | |
| |
|
|
| |
|
|
| |
для: FroNiTy
(21.01.2011 в 13:11)
| | | Если не требуется перестановка крайних элементов:
<script type="text/javascript">
function move(idx, direct) {
idx = idx.parentNode.parentNode.rowIndex;
var tb = document.getElementById('tbl');
var ln = tb.rows.length-1;
if(direct < 0 && idx > 0 || direct > 0 && idx < ln) {
if(document.all) tb.moveRow(idx, idx+direct);
else {
var tmp = tb.rows[idx+direct].innerHTML;
tb.rows[idx+direct].innerHTML = tb.rows[idx].innerHTML;
tb.rows[idx].innerHTML = tmp;
}
}
}
</script>
<table id="tbl">
<tr>
<td>1</td>
<td>1</td>
<td><input type="button" value="up" onClick="move(this,-1)" />
<input type="button" value="down" onClick="move(this,1)" /></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td><input type="button" value="up" onClick="move(this,-1)" />
<input type="button" value="down" onClick="move(this,1)" /></td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td><input type="button" value="up" onClick="move(this,-1)" />
<input type="button" value="down" onClick="move(this,1)" /></td>
</tr>
</table>
|
| |
| |
|
|
