Question

我想问你是否有人知道这样的Web组件，因为我确定有一个，我将在下面描述行为。

这是图片：

当您单击A表的元素/列，然后单击To the right Button时，它应移至右侧，反之亦然。因此，如果您知道如何实现这一目标，那就太棒了，如果您知道我可以使用的组件（而不是create，纯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

为什么不只单击时标记框的html内容，当单击右键时，将标记框的html复制到右侧并追加。反之亦然

Answer 3

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

$('#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>

在两个表/对象容器，jQuery之间添加/删除列/元素

3 个答案: