TableDnD在td jquery中不使用span

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TableDnD在td jquery中不使用span相关的知识,希望对你有一定的参考价值。

我正在创建一个表格,其中我有可拖动的tr,我使用TableDnD作为可拖动组件。

代码如下所示:

$(document).ready(function () {
    var iCnt = 1;
    $("#tblQuestionAns tr").each(function () {
        var id = "tr" + parseInt(iCnt);
        $(this).attr("id", id);
        iCnt++;
    });
    $("#tblQuestionAns").find("tr :even").addClass("even");
    $("#tblQuestionAns").find("tr :odd").addClass("odd");
    $("#tblQuestionAns").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function (table, row) {
            $("#tblQuestionAns").find("tr").removeClass("even odd");
            $("#tblQuestionAns").find("tr :even").addClass("even");
            $("#tblQuestionAns").find("tr :odd").addClass("odd");
        }
    });
});

当我创建如下所示的表时,这是有效的:

<table id="tblQuestionAns">
    <tr>
        <td>
            Test1
        </td>
    </tr>
    <tr>
        <td>
            Test2
        </td>
    </tr>
</table>

但是当我在td中添加span时,它将无法工作,这是一个例子:

<table id="tblQuestionAns">
    <tr>
        <td>
            <span>Test1</span>
        </td>
    </tr>
    <tr>
        <td>
            <span>Test2</span>
        </td>
    </tr>
</table>

这是JSFiddle for your reference

答案

您是否尝试在span上禁用指针事件?它对我来说很好。不确定这是否是你想要完成的。

$(document).ready(function() {
  var iCnt = 1;
  $(".tblQuestionAns tr").each(function() {
    var id = "tr" + parseInt(iCnt);
    $(this).attr("id", id);
    iCnt++;
  });
  $(".tblQuestionAns").find("tr :even").addClass("even");
  $(".tblQuestionAns").find("tr :odd").addClass("odd");
  $(".tblQuestionAns").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
      $(".tblQuestionAns").find("tr").removeClass("even odd");
      $(".tblQuestionAns").find("tr :even").addClass("even");
      $(".tblQuestionAns").find("tr :odd").addClass("odd");
    }
  });
});
span {
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<div>
  without span
</div>
<table class="tblQuestionAns">
  <tr>
    <td>
      test1
    </td>
  </tr>
  <tr>
    <td>
      test2
    </td>
  </tr>
</table>
<div>
  with span
</div>
<table class="tblQuestionAns">
  <tr>
    <td>
      <span>test1</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>test2</span>
    </td>
  </tr>
</table>

以上是关于TableDnD在td jquery中不使用span的主要内容,如果未能解决你的问题,请参考以下文章

使用 TableDnD 拖放 GridView 行

Flex wrap 在 IE11 的 td 标签中不起作用

使用jQuery和Visual Studio SPA模板

如何使用 jquery 在表格元素中获取“td”?

为啥 C# 的 onClick 事件在表标签的 <td> 中不起作用

设置表格的 td 高度在 Firefox 中不起作用