目标和克隆特定 table 单元格，从上到下追加第二个 table

Question

我有麻烦了，我已经尝试做一些对大多数经验丰富的开发人员来说很简单的事情，但没有成功。如您所见，每个 table 行中都有一个加号按钮。我想实现一个双 table 系统，我单击左侧 table 上的加号按钮将左侧 table 中的播放器转移到右侧 table 而不删除行中的玩家。随后单击任何加号按钮应将播放器从单击它的行中带走，并从顶部开始填充右侧 table 的下一个空行。单击加号按钮应该禁止再次选择该行，右边的减号按钮 table 应该删除玩家并恢复他在左边的活动状态 table。当 table 填满时，我试图让添加玩家返回 "table is full" 警报。这看起来很容易，但我一直在研究这个，这就是我想出的。这对我来说感觉像是一个 jquery 解决方案，但我什至无法开始使用它。我在下面尽力而为。作为参考，想一想 fanduel.com 如何使用他们的两个 table 起草系统。

$(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 () {
    $('.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();
    });
});

您基本上是在克隆按钮所在的行，然后将其放入您的第二个 table 中，并附上可用于删除它的引用。

请注意，remove-player class 的事件处理程序是一个委托事件，因为您要绑定到右侧 table 中尚不存在的 .remove-player 按钮。

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

一个工作示例

Answer 2

您可能想试试这个：

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

目标和克隆特定 table 单元格，从上到下追加第二个 table

Target and clone specific table cell, Append from top to bottom of second table

javascript

jquery

html

append

clone