Целевая и клонная ячейка таблицы, добавьте сверху вниз вторую таблицу

Question

У меня проблемы, я не пытался сделать что-то, что я уверен, просто для большинства опытных разработчиков. Как вы можете видеть, кнопка плюс находится в каждой строке таблицы. Я хочу создать две таблицы, в которых я нажимаю кнопку «плюс» в таблице слева, перенося игрока в левую таблицу на правую таблицу, не удаляя игрока в строке. Последующие клики любой кнопки «плюс» должны взять игрока из строки, в которую он был нажат, и заполнить следующую открытую строку таблицы справа, начиная с вершины. Щелчок кнопки «плюс» должен отключить эту строку от повторного выбора, а кнопка «минус» на правой таблице должна удалить плеер и восстановить его активное состояние в левой таблице. Когда таблица заполнена, я пытаюсь добавить игроков обратно с предупреждением «table is full». Это кажется достаточно простым, но я изучаю это, и это то, что я придумал. Для меня это похоже на jquery-решение, но я даже не могу начать с него. Я сделал все, что мог, ниже. Для справки подумайте о том, как fanduel.com выполняет свою две системы составления таблицы.

$(document).ready(function() { 
 
$('.addplayer').click(function (event) { 
 
$('tr .select').eq(0).clone().appendTo("tr .selected").after(); 
 

 
}); 
 
$(".remove-player").click(function (event) { 
 
    $(".selected").remove(); 
 
    
 
    }); 
 
    
 

 
});

tr:nth-child(even) { 
 
    background-color: #e3e3e3; 
 
    color:black; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color:black; 
 
} 
 
table { 
 
    border: #5a5a5a medium solid; 
 
    width: 300px; 
 
    color:white; 
 
    
 
} 
 
input { 
 
    cursor: pointer; 
 
} 
 

 
th { 
 
    color:white; 
 
     background-color:black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="left-table"> 
 
    <th>Player</th> 
 
    <th>add</th> 
 
    <tr> 
 
    <td class="select">Player1</td> 
 
    <td> 
 
     <input type="button" value="+" class="addplayer" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Player2</td> 
 
    <td> 
 
     <input type="button" value="+" class="addplayer" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Player3</td> 
 
    <td> 
 
     <input type="button" value="+" class="addplayer" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="select">Player4</td> 
 
    <td> 
 
     <input type="button" value="+" class="addplayer" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<table class="right-table"> 
 
    <th>Player</th> 
 
    <th>Remove</th> 
 
    <tr> 
 
    <td class="selected"></td> 
 
    <td> 
 
     <input type="button" value="-" class="remove-player" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="selected"></td> 
 
    <td> 
 
     <input type="button" value="-" class="remove-player" /> 
 
    </td> 
 
    </tr> 
 

 
</table>

Answer 1

Вы migth хотите попробовать это:

$(document).ready(function() { 
    $('.right-table tr .selected').addClass('empty'); 

    $('.addplayer').click(function (event) { 
     if($(".right-table tr .empty").length <= 0) { 
      alert("Table is full"); 
      return; 
     } 

     var txt = $(this).closest("tr").find('.select').text(); 

     $(".right-table tr .empty").eq(0).text(txt); 
     $(".right-table tr .empty").eq(0).attr("data-row",$(this).closest("tr").index()); 
     $(".right-table tr .empty").eq(0).removeClass('empty'); 
     $(this).attr('disabled', true); 
    }); 

    $(".remove-player").click(function (event) { 
     var index = $(this).closest("tr").find('.selected').attr('data-row'); 
     $(this).closest("tr").find('.selected').text(""); 
     $(this).closest("tr").find('.selected').addClass("empty"); 
     $('.left-table tr').eq(index).find('.addplayer').attr('disabled', false); 
    }); 

}); 

Чтобы запустить его, вы можете посетить его здесь: https://fiddle.jshell.net/dgu80ajz/5/

Answer 2

Используйте следующий код

$(document).ready(function() { 
    $('.addplayer').click(function (event) { 
     var $player_row = $(this).closest('tr'); 
     var $new_row = $player_row.clone(); 
     $new_row.find('.addplayer').addClass('remove-player').removeClass('addplayer').val('-') 
     $new_row.data('row_num', $('.left-table').find('tr').index($player_row)); 
     $('.right-table').find('tbody').append($new_row); 
     $player_row.find('.addplayer').attr('disabled', 'disabled'); 
    }); 
    $(".right-table").on('click', '.remove-player', function (event) { 
     var $row = $(this).closest('tr'); 
     $('.left-table').find('tr').eq($row.data('row_num')).find('.addplayer').attr('disabled', false) 
     $row.remove(); 
    }); 
}); 

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

Обратите внимание, что обработчик событий для класса remove-player является событием делегата, потому что вы хотите привязать к кнопкам .remove-player, которые еще не существуют в правой таблице.

https://jsfiddle.net/67g2cb8m/4/

для рабочего примера