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

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

解决方案 »

  1.   

    楼主确定只要拖动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>