将div拖放到表中并获取数据值

时间:2012-07-24 12:26:27

标签: javascript jquery jquery-ui

我在表格单元格中设置div数据值,我想要的是如何获取div数据值,同时删除。

在我的代码中,我像这样设置表中的数据

  <script type="text/javascript">

 function createDynamicTable(tbody, rows, cols) {

      if (tbody == null || tbody.length < 1) return;

    for (var r = 1; r <= rows; r++) {

          var trow = $("<tr>");

         for (var c = 1; c <= cols; c++) {

              var cellText = "Cell " + r + "." + c

            $("<td>")

                     .addClass("tableCell")

                      .text(cellText)

                     .data("col", c)

                     .appendTo(trow);

        }

         trow.appendTo(tbody);

     }

  }   

在我的代码中,单击表格的单元格,我得到行和列数据div值

   $(document).ready(function() {

    createDynamicTable($("#tbl"), 10, 5);

     $("#tbl td.tableCell")

             .click(function() {

                 alert("Clicked Col=" + $(this).data("col"));

             });

 });

它完美运作

完整代码查看网站: http://blogs.microsoft.co.il/blogs/linqed/archive/2009/03/04/generating-html-tables-with-jquery.aspx

我尝试这样但我无法在停止事件中获取表格单元数据值。如何通过拖放获取设置的数据值。

$(".drag").draggable({

                    stop: function (ev, ui) {

                        var pos = $(ui.helper).offset();
                        var oldData = $("#tbl td.tableCell").data('col');
                        alert(oldData);
                        }
});

帮助我通过拖放获取数据值。

提前致谢。

1 个答案:

答案 0 :(得分:0)

拖放可能会重组DOM。尝试使用jQuery.live而不是jQuery.click(如果jQuery version支持)来绑定click事件:

$("#tbl td.tableCell")
         .live('click', function() {
             alert("Clicked Col=" + $(this).data("col"));
          });

由于.live()已弃用,您可能还想尝试.on()方法(如果使用jQuery 1.7.x)。