Add/Remove Columns/elements 在两个 Tables/ObjectContainer、jQuery 之间

Question

我想问你是否有人知道这样的 webcomponent，因为我确定有，我将在下面描述其行为。

图片如下：

当您单击 A Table 的 element/column 然后单击 To the right Button 它应该向右移动，反之亦然。因此，如果您知道我如何实现这一点，那就太棒了，如果您知道我可以使用的组件（而不是创建，纯 javascript 或 jQuery）那太好了。注意：我需要它的按钮，而不是拖放。

Answer 1

尝试一下，希望对您有所帮助。

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var selectedElement = '';
$(document).on("click", "td", function() { 
 selectedElement = this;
});
$(document).on("click", ".right", function() { 
 if(selectedElement && selectedElement.innerHTML && selectedElement.parentElement.parentNode.parentNode.id != "table2") {
   $("#table2 tbody").append("<tr><td>" + selectedElement.innerHTML + "</td></tr>");
   $(selectedElement).remove();
   selectedElement = '';
 }
});
$(document).on("click", ".left", function() { 
 if(selectedElement && selectedElement.innerHTML && selectedElement.parentElement.parentNode.parentNode.id != "table1") {
   $("#table1 tbody").append("<tr><td>" + selectedElement.innerHTML + "</td></tr>");
   $(selectedElement).remove();
   selectedElement = '';
 }
});
</script>
<style>
  td:active {
    background-color : #87CEEB;
}
</style>
</head>

<body>
<div class="container" style="width:100%">    
<div class="leftCont" style="width:30%">      
  <table class="table" id="table1" style="width:30%;float:left">
    <thead>
      <tr>
        <th>A</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Columns1/elements1</td>
      </tr>
      <tr>
        <td>Columns2/elements2</td>
      </tr>
      <tr>
        <td>Columns3/elements3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="middleCont" style="width:100px;float:left;margin: 50px 120px 50px 120px;display: inline-grid;"> 
  <button class="right" value="right">Right</button><br>
  <button class="left" value="left">Left</button>
</div>
<div class="rigthCont" style="width:30%;float:left"> 
  <table class="table" id="table2" style="width:30%;float:left">
    <thead>
      <tr>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</div>
</div>
</body>
</html>

Answer 2

这是我的解决方案，请查看下面的实例：

$('#multiselect').multiselect();

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-xs-5">
    <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
      <option value="1">Columns1/elements1</option>
      <option value="2">Columns2/elements2</option>
      <option value="3">Columns3/elements3</option>
      <option value="4">Columns4/elements4</option>
    </select>
  </div>

  <div class="col-xs-2">
    <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
    <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
    <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
    <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
  </div>

  <div class="col-xs-5">
    <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
  </div>
</div>

Add/Remove Columns/elements 在两个 Tables/ObjectContainer、jQuery 之间

Add/Remove Columns/elements between two Tables/ObjectContainer, jQuery

javascript

jquery

jquery-ui-sortable