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

使用以下代码

string[] array= new string[2];
array[0] = "1";
array[1] = "2";

if( Array.IndexOf(array, userInput) != -1) //-1 means it doesn't exist
{
   message = "you won a new car";
}

您基本上克隆了包含该按钮的行，然后将其放在第二个表中，并带有可用于删除它的引用。

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

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

了解工作示例

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

2 个答案: