如何用jQuery在页面实现把一个table中的tb拖拽到另外一个table中，并且把数据添加到新的table中

lym003 2019-06-18 09:41:07

50积分，求大神帮助。谢谢！

...全文

140 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

lym003 2019-07-02

打赏
举报

感谢您的付出，这个问题我自己已经解决了。还是很感谢您的，我的问题可能表达的不是很到位，是拖动td中的数据。

河南棒小伙 2019-06-19

打赏
举报

楼主确定只要拖动td么？拖td到另一个table，挺尴尬的吧，接收的table怎么处理？我写了一个拖动tr的例子，另一个table完整接收。可以借鉴一下


<!DOCTYPE html>
<html>

<head>
  <style>
    .container table {
      border-collapse: collapse;
      padding: 15px;
    }

    .left {
      float: left;
      width: 40%;
      padding: 15px;
    }

    .right {
      float: right;
      width: 40%;
      padding: 15px;
    }

    .clearfix {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left">
      <table id="tableleft" border="1" width="100%">
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>住址</td>
        </tr>
        <tr draggable="true" ondragstart="drag(event)">
          <td>1</td>
          <td>张三</td>
          <td>14</td>
          <td>河南省濮阳县</td>
        </tr>
        <tr draggable="true" ondragstart="drag(event)">
          <td>2</td>
          <td>李四</td>
          <td>25</td>
          <td>北京市大兴区</td>
        </tr>
      </table>
    </div>
    <div class="right">
      <table id="tableright" border="1" width="100%" ondrop="drop(event)" ondragover="allowDrop(event)">
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>住址</td>
        </tr>
        <tr>
          <td>1</td>
          <td>王五</td>
          <td>33</td>
          <td>湖南张家界</td>
        </tr>
        <tr>
          <td>2</td>
          <td>马六</td>
          <td>40</td>
          <td>河北张家口</td>
        </tr>
      </table>
    </div>
    <div class="clearfix"></div>
  </div>
  <script>
    var tableright=document.getElementById('tableright');
    window.onload=function(){
      var trs = document.getElementById('tableleft').querySelectorAll('tr');
      trs.forEach(function(item,index){
        item.setAttribute('id',index)
      })
    }
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("SrcId", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("SrcId");
      tableright.appendChild(document.getElementById(data));
    }
  </script>
</body>

</html>