Строка переключателя при втором нажатии

Question

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

У меня нет проблем с выбором одной строки, но я решил, как выбрать вторую. Я думаю, что с помощью jQuery replaceWith можно было бы выполнить ряд строк.

$(document).ready(function(){ 

var selections = new Array(2); 

$("tr").click(function() { 

    var selected = $(this).attr('id'); 

    //highlight selected row 
    $(this).toggleClass("marked"); 

    }) 

}); 

i've создал скрипку здесь: http://jsfiddle.net/zLz929xy/3

помощь или советы было бы здорово.

Answer 1

Я сделал некоторые изменения, мы надеемся, это показывает, как сделать это, не потрудившись с массивами и перекручивание или любой из этого. У нас будет только одна строка, помеченная как «отмеченная», поэтому нет необходимости повторять или проверять классы при удалении «отмеченного» класса.

Кроме того, поскольку мы всегда переключаем все строки, мы можем просто захватить все их html вместо того, чтобы разделить его на отдельные биты информации для отслеживания и работы.

$(document).ready(function(){ 
 
    // we need to be able to know the values of both the clicked rows and whether or 
 
    // not something is selected 
 
    var somethingSelected = false; 
 
    var firstRow; 
 
    var firstRowHTML; 
 
    var secondRow; 
 
    
 
    // when we click a tr, one of two things should happen - we are selecting the first 
 
    // row, or we are picking the second row and making the switch - and which one we 
 
    // do will depend on whether or not the somethingSelected var is true or false 
 
    $("tr").click(function() { 
 
     if (somethingSelected) { 
 
      secondRow = $(this); 
 
      firstRow.html(secondRow.html()); 
 
      secondRow.html(firstRowHTML); 
 
      somethingSelected = false; 
 
      $("tr").removeClass("marked"); 
 
     } else { 
 
      somethingSelected = true; 
 
      firstRow = $(this); 
 
      firstRowHTML = firstRow.html(); 
 
      $(this).addClass("marked"); 
 
     } 
 
    }); 
 
});

html { 
 
font-family: Verdana; 
 
font-size: 10pt; 
 
} 
 

 
td{ 
 
border: 1px solid; 
 
} 
 

 
.marked { 
 
background: #e5e5e5; 
 
font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="people"> 
 

 
    <tr> 
 
     <th id="id">ID</th> 
 
     <th id="name">Name</th> 
 
    </tr> 
 

 
    <tr id="user_1"> 
 
     <td headers="id">1</td> 
 
     <td headers="name">Bob</td> 
 
    </tr> 
 
    <tr id="user_2"> 
 
     <td headers="id">2</td> 
 
     <td headers="name">Carl</td> 
 
    </tr> 
 
    <tr id="user_3"> 
 
     <td headers="id">3</td> 
 
     <td headers="name">Jane</td> 
 
    </tr> 
 
    <tr id="user_4"> 
 
     <td headers="id">4</td> 
 
     <td headers="name">Steven</td> 
 
    </tr> 
 
    <tr id="user_5"> 
 
     <td headers="id">5</td> 
 
     <td headers="name">Sarah</td> 
 
    </tr> 
 
    <tr id="user_6"> 
 
     <td headers="id">6</td> 
 
     <td headers="name">Marc</td> 
 
    </tr> 
 

 
</table>

Answer 2

Посмотрите на мою скрипку.

Я немного изменил структуру вашей скрипки.

Легко понять, что он просто получает строку и проверяет уже существующий «отмеченный» элемент. Если в таблице есть один переключатель, элементы первой строки с элементами второй строки ... При необходимости вы также можете добавить var oldRowId = $(row).attr('id') и var newRowId = $(element).attr('id'), чтобы также переключать идентификатор строки.

Это очень простой способ, на мой взгляд

$(document).ready(function(){ 
 
    $("tr").click(function() { 
 
     var row = $(this); 
 
     
 
     var check = false; 
 
     $.each($('#people tbody tr'), function(idx, element) { 
 
      if($(element).hasClass('marked')) { 
 
       // old values from row 
 
       var oldId = $(row).find('.id').html(); 
 
       var oldName = $(row).find('.name').html(); 
 
       
 
       // new values 
 
       var rowId = $(element).find('.id').html(); 
 
       var rowName = $(element).find('.name').html(); 
 
       
 
       // Replace element 
 
       $(element).find('.id').html(oldId); 
 
       $(element).find('.name').html(oldName); 
 
       
 
       $(row).find('.id').html(rowId); 
 
       $(row).find('.name').html(rowName); 
 
      
 
      \t // check 
 
       check = true; 
 
      } 
 
     }); 
 

 
     if(!check) { 
 
      $(this).toggleClass("marked"); 
 
     } else { 
 
      $.each($('#people tbody tr'), function(idx, element) { 
 
      \t if($(element).hasClass('marked')) { 
 
       \t $(element).toggleClass('marked'); 
 
       } 
 
      }); 
 
     } 
 
    }) 
 
});

html { 
 
font-family: Verdana; 
 
font-size: 10pt; 
 
} 
 

 
td{ 
 
border: 1px solid; 
 
} 
 

 
.marked { 
 
background: #e5e5e5; 
 
font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="people"> 
 
    <tbody> 
 
    <tr> 
 
     <th class="id">ID</th> 
 
     <th class="name">Name</th> 
 
    </tr> 
 

 
    <tr id="user_1"> 
 
     <td class="id">1</td> 
 
     <td class="name">Bob</td> 
 
    </tr> 
 
    <tr id="user_2"> 
 
     <td class="id">2</td> 
 
     <td class="name">Carl</td> 
 
    </tr> 
 
    <tr id="user_3"> 
 
     <td class="id">3</td> 
 
     <td class="name">Jane</td> 
 
    </tr> 
 
    <tr id="user_4"> 
 
     <td class="id">4</td> 
 
     <td class="name">Steven</td> 
 
    </tr> 
 
    <tr id="user_5"> 
 
     <td class="id">5</td> 
 
     <td class="name">Sarah</td> 
 
    </tr> 
 
    <tr id="user_6"> 
 
     <td class="id">6</td> 
 
     <td class="name">Marc</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

Использование функции подкачки из https://stackoverflow.com/a/698386/2314737:

var selections = new Array(2); 
 

 
$("tr").click(function() { 
 

 
    var selected = $(this).attr('id'); 
 

 
    //highlight selected row 
 
    if ($('.marked').length) { 
 
    $(this).swapWith($('.marked')); 
 
    $('.marked').toggleClass("marked"); 
 
    } 
 
    $(this).toggleClass("marked"); 
 
}) 
 

 

 
jQuery.fn.swapWith = function(to) { 
 
    return this.each(function() { 
 
    var copy_to = $(to).clone(true); 
 
    var copy_from = $(this).clone(true); 
 
    $(to).replaceWith(copy_from); 
 
    $(this).replaceWith(copy_to); 
 
    }); 
 
};

html { 
 
font-family: Verdana; 
 
font-size: 10pt; 
 
} 
 

 
td{ 
 
border: 1px solid; 
 
} 
 

 
.marked { 
 
background: #e5e5e5; 
 
font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="people"> 
 

 
    <tr> 
 
    <th id="id">ID</th> 
 
    <th id="name">Name</th> 
 
    </tr> 
 

 
    <tr id="user_1"> 
 
    <td headers="id">1</td> 
 
    <td headers="name">Bob</td> 
 
    </tr> 
 
    <tr id="user_2"> 
 
    <td headers="id">2</td> 
 
    <td headers="name">Carl</td> 
 
    </tr> 
 
    <tr id="user_3"> 
 
    <td headers="id">3</td> 
 
    <td headers="name">Jane</td> 
 
    </tr> 
 
    <tr id="user_4"> 
 
    <td headers="id">4</td> 
 
    <td headers="name">Steven</td> 
 
    </tr> 
 
    <tr id="user_5"> 
 
    <td headers="id">5</td> 
 
    <td headers="name">Sarah</td> 
 
    </tr> 
 
    <tr id="user_6"> 
 
    <td headers="id">6</td> 
 
    <td headers="name">Marc</td> 
 
    </tr> 
 

 
</table>

Answer 4

Я бы лично добавить двойное событие щелчка ко второму выбору на основе одного клика слишком легко сделать случайно.

Вы можете исправить ошибки.

В любом случае, если это то, что вы считаете, вы можете использовать событие dblclick и иметь что-то вроде этого;

$("tr").dblclick(function(e) { 
    if ($('.marked').length == 1) { 
     var marked  = $('.marked').html(), 
      marked_id = $('.marked').attr('id'), 
      element = $(this).html(), 
      element_id = $(this).attr('id'); 
     $('tr[id="'+marked_id'+"]').html(element); 
     $('tr[id="'+element_id'+"]').html(marked); 
     $('tr').removeClass('marked'); 
    } 
}); 

Вы просто проверить, если $ («пометку»). Длина 1, так как DblClick прикрепляется к элементу вы хотите поменять с, который должен оставить 1 остальные поменять с.

Затем вы просто храните html() только TR с идентификаторами обоих элементов, чтобы вы могли их заменить.

Live Preview :: http://jsfiddle.net/MrMarlow/zLz929xy/7/