Вход

Просмотр полной версии : Перенос активных checkbox.

alshinkareff
28.02.2013, 19:12
Здравствуйте:help: . Прошу помощи уважаемые гуру javascript'а. :( Задание:

Сотрудники в обоих списках отсортированы по алфавиту.

При выборе сотрудника из левого списка, он перемещается в правый. При снятии галочки, снова в левый.

Все перемещения осуществляются с сохранением сортировки по алфавиту.

Сотрудника можно выбрать как установкой галочки, так и по клику по ФИО сотрудника.

http://imglink.ru/pictures/28-02-13/94b9b2853a2d80b007be637bb98d1a2f.jpg

Молю о помощи, спасите!:help:
рони
28.02.2013, 19:47
alshinkareff,
а где ваши попытки сделать хоть что-то? html хотябы
alshinkareff
28.02.2013, 21:04
Просто я не знаю как сделать лучше, т.е. грамотней. Можно же сделать таблицами, можно DIV'ами. Я не знаю как практичней сделать для взаимодействия с JS. Такой уж я нуб в JS. :( Надежда на Вас...

<html>
<head>
<meta charset="utf-8">
<title>Checkbox + JS</title>
</head>
<body>
<div>
<font size="12px"><b>Список сотрудников</b></font>
</div>

<div style="float: left; margin-right: 50px;">
<p><b>Сотрудники</b></p>

<table style="width: 270px; height: 350px; border: 1px solid gray;">
<tr>
<td>
<input type="checkbox"> Иванов Иван
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Петров Петр
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Зеленый Вениамин
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Гербулов Иван
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Осипова Анна
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Мелкумянц Алексей
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Черный Алексей
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Король Иван
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Сидоров Денис
</td>
</tr>
</table>
</div>

<div>
<p><b>Выбранные сотрудники</b></p>

<table style="width: 270px; height: 350px; border: 1px solid gray;">
<tr>
</tr>
</table>
</div>
</body>
</html>
рони
28.02.2013, 22:27
alshinkareff,
:cray: но это врятли вас спасёт ... :write:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Checkbox + jquery</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
var Tr = jQuery.makeArray($('tr'));
Tr.sort(function f(a, b) {
a = $(a).text();
b = $(b).text();
var c = 0
if (a > b) c = 1;
if (a < b) c = -1;
return c
});
var first = $('table:first');
var last = $('table:last');
$.map(Tr, function (tr) {
$(tr).click(function (event) {
var checkbox = $(':checkbox', $(tr));
var checked = checkbox.prop("checked");
if(event.target.nodeName != 'INPUT') checkbox.prop("checked", !checked)
$.map(Tr, function (tr) {
var checkbox = $(':checkbox', $(tr));
var checked = checkbox.prop("checked");
$(tr).appendTo(checked? last : first)
});
});
});
$(Tr[0]).click().click()
});
</script>
</head>

<body>
<div>
<font size="12px"><strong>Список сотрудников</strong></font>
</div>

<div style="float: left; margin-right: 50px;">
<p><strong>Сотрудники</strong></p>

<table style="width: 270px; height: 350px; border: 1px solid gray;">
<tr>
<td><input type="checkbox"> Иванов Иван</td>
</tr>

<tr>
<td><input type="checkbox"> Петров Петр</td>
</tr>

<tr>
<td><input type="checkbox"> Зеленый Вениамин</td>
</tr>

<tr>
<td><input type="checkbox"> Гербулов Иван</td>
</tr>

<tr>
<td><input type="checkbox"> Осипова Анна</td>
</tr>

<tr>
<td><input type="checkbox"> Мелкумянц Алексей</td>
</tr>

<tr>
<td><input type="checkbox"> Черный Алексей</td>
</tr>

<tr>
<td><input type="checkbox"> Король Иван</td>
</tr>

<tr>
<td><input type="checkbox"> Сидоров Денис</td>
</tr>
</table>
</div>

<div>
<p><strong>Выбранные сотрудники</strong></p>

<table style="width: 270px; height: 350px; border: 1px solid gray;"></table>
</div>
</body>
</html>
alshinkareff
28.02.2013, 22:58
:thanks: Вы не представляете как мне помогли. :dance: Спасибо:)