javascript拖放表行

javascript拖放表行,javascript,drag-and-drop,html-table,rows,Javascript,Drag And Drop,Html Table,Rows,这是我的动态表,有了它,我得到了三个具有不同ID的表 <?php echo "<table class='table table-hover table-bordered' ondrop='drop(event,this)' ondragover='allowDrop(event)' id='".$type."'>"; if(empty($players)) echo "<tr><td></td></tr>"; forea

这是我的动态表,有了它,我得到了三个具有不同ID的表

<?php
echo "<table class='table table-hover table-bordered' ondrop='drop(event,this)' ondragover='allowDrop(event)' id='".$type."'>";
if(empty($players))
    echo "<tr><td></td></tr>";
foreach($players as $p)
{
    echo "<tr data-id='".$p['to']."' data-fixture='".$p['fixture']."' data-team='".$p['team']."' draggable='true' ondragstart='drag(event,this)' id='".$type."aa'>";
    echo "<td >".$p['name']."</td>";
    echo "</tr>";
}
echo "</table>";
?>

我的Javascript是这样的:

function allowDrop(ev) {
    ev.preventDefault();
}


  function drag(ev,str) {
      //alert(str);

    var temp = str.parentNode;
    child = temp.children;
    if(child.length==1)
    {
    $(temp).append("<tr><td></td></tr>");
    }

    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("val", ev.target.getAttribute('data-id'));
    ev.dataTransfer.setData("fixture", ev.target.getAttribute('data-fixture'));
    ev.dataTransfer.setData("team", ev.target.getAttribute('data-team'));
}


function drop(ev,str) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var id = ev.dataTransfer.getData("val");
    var fixture = ev.dataTransfer.getData("fixture");
    var team = ev.dataTransfer.getData("team");
    ev.target.appendChild(document.getElementById(data));
    //alert(fixture);
    if(str.id=='avl')
        status=1;
    else if(str.id=='uavl')
        status=2;

            $.ajax({
       url: "<?php echo base_url();?>index.php/teams/update_players/"+status+"/"+id+"/"+fixture+"/"+team,
       type: 'GET',
       success: function(data) {
          //$("#a_p").html(data);
          //alert(data);
       },
        });

} 
功能allowDrop(ev){
ev.preventDefault();
}
功能拖动(ev、str){
//警报(str);
var temp=str.parentNode;
儿童=临时儿童;
if(子项长度==1)
{
$(临时)追加(“”);
}
ev.dataTransfer.setData(“文本”,ev.target.id);
ev.dataTransfer.setData(“val”,ev.target.getAttribute(“data-id”);
ev.dataTransfer.setData(“fixture”,ev.target.getAttribute(“data-fixture”);
ev.dataTransfer.setData(“团队”,ev.target.getAttribute(“数据团队”);
}
功能下降(ev、str){
ev.preventDefault();
var data=ev.dataTransfer.getData(“文本”);
var id=ev.dataTransfer.getData(“val”);
var fixture=ev.dataTransfer.getData(“fixture”);
var team=ev.dataTransfer.getData(“团队”);
ev.target.appendChild(document.getElementById(数据));
//警报(固定装置);
如果(str.id='avl')
状态=1;
否则如果(str.id='uavl')
状态=2;
$.ajax({
url:“index.php/teams/update_players/”+status+“/”+id+“/”+fixture+“/”+team,
键入:“GET”,
成功:功能(数据){
//$(“#a#p”).html(数据);
//警报(数据);
},
});
} 
将表行从一个表拖放到另一个表时。。tr下降到td,不在表中

像这样

<table>
<tr>
<td>
<tr> (this is a dropped row)
<td></td>
</tr>
</td>
</tr>
</table>

(这是删除的行)

您的
drop
函数将一个子项附加到
ev.target
。尝试使用
console.log
检查
tagName
ev.target
。如果是TD,那就是你的问题

没有在评论部分提供,因为我没有足够的声誉来提交评论