定位并克隆特定表格单元格，从第二个表格的顶部到底部附加

Question

我遇到了麻烦，我尝试做一些我确信对于大多数经验丰富的开发人员来说很简单的事情，但无济于事。 如您所见，每个表格行中都有一个加号按钮。 我想实现一个两桌系统，我点击左侧桌子上的加号按钮，将左侧桌子中的玩家转移到右侧桌子，而不删除行中的玩家。任何加号按钮的后续点击都应将玩家从点击它的行中取出，并从顶部开始填写右侧表格的下一个打开的行。单击加号按钮应禁用该行再次被选中，右侧桌子上的减号按钮应删除玩家并恢复其在左侧桌子上的活动状态。当桌子被填满时，我正在尝试添加玩家回来并发出“桌子已满”警报。这似乎很容易，但我一直在研究这个，这就是我想出的。这对我来说就像一个 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

你可能想试试这个：

$(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/

一个工作示例