Javascript-форум - Перенос активных checkbox.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Перенос активных checkbox. (https://javascript.ru/forum/dom-window/36011-perenos-aktivnykh-checkbox.html)

Перенос активных checkbox.

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

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

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

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

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

Молю о помощи, спасите!:help:

alshinkareff,
а где ваши попытки сделать хоть что-то? html хотябы

Просто я не знаю как сделать лучше, т.е. грамотней. Можно же сделать таблицами, можно 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>

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>

:thanks: Вы не представляете как мне помогли. :dance: Спасибо:)