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

Question

我遇到了麻烦，我尝试做一些我确信对大多数经验丰富的开发人员来说都很简单的事情却无济于事。正如您所看到的，每个表行中都有一个加号按钮。我想要实现一个两表系统，其中我单击左侧表上的加号按钮，将左表中的玩家转移到右表中，而不删除该行中的玩家。随后单击任何加号按钮都应让玩家从单击的行开始，并从顶部开始填充右侧表格的下一个空行。单击加号按钮应禁止再次选择该行，而右表上的减号按钮应删除玩家并恢复其在左表上的事件状态。当 table 填满时，我试图添加玩家，然后返回“ table 已满”警报。这看起来很简单，但我一直在研究这个，这就是我想出的结果。这对我来说就像是一个 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/