Javascript Jquery Datatable将列从一个表拖放到另一个表

我使用的是：jquery.dataTables.js，来自：

我正在尝试将一列从一个表拖放到另一个表

编辑： 所以基本上我想做的是：

• 能够将表2中的名称拖放到上表中名为name的列中
• 拖放名称后，相同的名称将从表2中消失

案例2：如果我使用按钮添加新行“添加新行”

• 我需要能够将表2中的名称拖放到该列name

所以基本上我想在列中而不是行中进行拖放

我不想创建新行，只需将名称从一个表移动到另一个表即可

编辑2:

1-能否将倍数值从表2拖放到表1？ 不，拖放操作只需1乘1即可。 用户单击“编辑”或“添加新行”后，即可进行拖放操作。 因此，我将能够将表2中的名称替换为表1中的列名

2-如果没有，则拖动的值应替换其下降的值？ 对

3-如果是，它应该如何工作？添加其他值为空的新行？ 无需添加行，只需替换列名。

将如何工作： 所以，在单击“编辑”或“添加新行”后，我将能够将一个名称从表2中拖到中的列中 表1

再进行几次请求： 如果选择表2中的行，则该行应更改颜色，显示已选择。而在表1的列名中，这个需要被删除的地方需要改变颜色来显示用户可以被删除，用户删除后颜色应该恢复正常

在此工作的示例：

$（文档）.ready（函数（）{
var dataUrl='1〕http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
变量选项=[
{键：'选项1'，值：1}，
{键：'选项2'，值：2}，
{键：'选项3'，值：3}
];
$（文档）.ready（函数（）{
var$table=$（“#示例”）；
var dataTable=null；
$table.on（'mousedown'，td.fa.fa减半平方'，函数（e）{
dataTable.row（$（this）.nexture（“tr”）.remove（）.draw（）；
});
$table.on（'mousedown.edit'，'i.fa.fa pencil square'，函数（e）{
启用行编辑（$（this））；
});
$table.on（'mousedown'，'input'，函数（e）{
e、 停止传播（）；
});
$table.on（'mousedown.save'，'i.fa.fa-envelope-o'，函数（e）{
updateRow（$（this），true）；//将保存按钮传递给函数。
});
$table.on（'mousedown'，'select basic'，函数（e）{
e、 停止传播（）；
});
dataTable=$table.dataTable({
ajax:dataUrl，
行重新排序：{
dataSrc:'命令'，
选择器：“tr”
},
栏目：[{
数据：“订单”
}, {
数据：“名称”
}, {
数据：“地点”
}, {
数据：“删除”
}]
});
$table.css（'border-bottom'，'none'）
.after（$（''）.addClass（'addRow'））
.append（$（''）.attr（'id'，'addRow'）.text（'addnewrow'））；
//添加行
$（'#addRow'）。单击（函数（）{
var$row=$（“#新行模板”）.find（'tr'）.clone（）；
dataTable.row.add（$row.draw（）；
//创建时切换编辑模式。
enableRowEdit（$table.find（'tbody tr:last child td i.fa.fa pencil square'）；
});
$（'#btn save'）。在（'单击'，函数（）上）{
updateRows（true）；//更新所有编辑的行
});
$（'#btn cancel'）。在（'click'，function（）上{
updateRows（false）；//还原所有编辑的行
});
功能启用行编辑（$editButton）{
$editButton.removeClass（）.addClass（“fa-信封-o”）；
var$row=$editButton.closest（“tr”）.off（“mousedown”）；
$row.find（“td”）.not（“：first”）.not（“：last”）.each（函数（i，el）{
enableEditText（$（此））
});
$row.find（'td:first'）。每个（函数（i，el）{
enableEditSelect（$（此））
});
}
函数enableEditText（$cell）{
var txt=$cell.text（）；
$cell.empty（）.append（$（“”{
键入：“文本”，
值：txt
}).data（'origing-text'，txt））；
}
函数enableEditSelect（$cell）{
var txt=$cell.text（）；
$cell.empty（）.append（$（“”{
类：“选择基本”
}).append（options.map）（函数（option）{
返回$（''）{
text:option.key，
值：option.value
})
})).data（'original-value'，txt））；
}
函数updateRows（提交）{
$table.find（'tbody tr td i.fa.fa-envelope-o'）。每个（函数（索引、按钮）{
updateRow（$（按钮），提交）；
});
}
函数updateRow（$saveButton，commit）{
$saveButton.removeClass（）.addClass（'fa-fa铅笔方块'）；
var$row=$saveButton.closest（“tr”）；
$row.find（'td'）。not（'：first'）。not（'：last'）。每个（函数（i，el）{
var$input=$（this.find（'input'）；
$（this）.text（提交？$input.val（）：$input.data（'original-text'）；
});
$row.find（'td:first'）。每个（函数（i，el）{
var$input=$（this.find（'select'）；
$（this）.text（提交？$input.val（）：$input.data（'original-value'）；
});
}
});
$（文档）.ready（函数（）{
var url='1〕http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2';
表=$（'#示例2'）。数据表({
ajax:url，
订单：[[0，“描述”]，
行重新排序：{
dataSrc:'地点'，
选择器：“tr”
},
列：[{
数据：“名称”
}]
});
}); 
});
div.addRow{
线高：45px；
背景色：#fff；
左侧填充：10px；
边框底部：1px实心；
边框顶部：1px实心#e5；
}

秩序
名称
国家
行动
999
__名字__
__国家__


取消
拯救




表2




名称




表格
var rowChache = [];

    function mouseUp(event) {
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

    if (ctrl.length > 0 && rowCache.length > 0) {
      var el = rowCache[0];
      var data = el.row.data();

      if (data.length > 0) {
        ctrl.val(data[0].name);
        el.row.remove().draw();
      }
    }

    rowCache = [];
    $('#example tr td:nth-child(2) input').removeClass('border-highlight');
  }

table.on('mousedown', 'tbody tr', function() {
var $row = $(this);

var r = table.rows(function(i, data) {
  return data.name == $row.children().first().text();
});

if (r[0].length > 0) {
  $row.parents('table').find('tr').removeClass('highlight');
  $row.addClass('highlight');
  $('#example tr td:nth-child(2) input').addClass('border-highlight');
}

  rowCache.push({
    row: r
  });
});