使用 JQuery 添加新表行的问题答案

【问题标题】：Issues with adding new table's row with JQuery使用 JQuery 添加新表行的问题
【发布时间】：2011-07-03 12:04:15
【问题描述】：

我按照以下说明添加新表的行： Add table row in jQuery

新行已成功添加，但没有获得其他行的功能（突出显示、可拖动……）。

桌子：

<table id="pubTab">
            <thead>
            <tr>
                <td align="center">col1</td>
                <td align="center">col2</td>
                <td align="center">col3</td>
                <td align="center">col4</td>
            </tr>
            </thead>
            <tbody>
            <tr id="1">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10" /></td>
            </tr>
            <tr id="2">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10"/></td>
            </tr>
            </tbody>
        </table>
<input id="addPubTab" type="button" value="ADD" style="background-color:green; width: 170px"/>

jQuery 脚本：

<script type="text/javascript">
        $(document).ready(function(){
            $("#addPubTab").click(function(){
                var id = "3";
                var value = "<tr id=\""+id+"\">"+
                            "<td>+++<input type=\"text\" size=\"40\" name=\"collection_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"50\" name=\"out_fname\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_id\""+id+"/></td>"+
                            "</tr>";
                $('#pubTab tbody').append(value);
            });
        });
    </script>

问题问题：它添加了新行，但我无法拖动它（向上/向下），因为我拖动另一根（没有用于拖动的光标）。

检查元素解析为：

<table id="pubTab">
<thead>_</thead>
<tbody>
    <tr id=”1” style=”cursor: move; “ class>_</tr>
    <tr id=”2” style=”cursor: move; “ class>_</tr>
    <tr id=”3”>_</tr>
</tbody>

请注意，我使用的是 jQuery 脚本（拖动/排序）：

$(function() {  $("#pubTab:not(thead)").tableDnD();   });

请帮忙。

【问题讨论】：

我想你可能不得不销毁最初的可拖动对象，然后重新分配它，以更新新的孩子
就在$('#pubTab tbody').append(value); btw :) 之后

标签： jquery html-table

【解决方案1】：

tableDnD 插件有一个方法，可能在最初发布此问题后添加。

.tableDnDUpdate()

正如documentation 所述

使表格更新其行，以便拖放功能在例如您添加了一行时起作用。

【讨论】：

当前tablednd稳定版本中没有这个方法。
$("...").tableDnDUpdate() 由 v0.6 添加，于 2011-12-02 发布。

【解决方案2】：

插入新行后尝试重新初始化 tableDnD 插件。

其他解决方案是 clone 一个现有行并更改其中的数据。

【讨论】：

谢谢，如何重新初始化？
$("#pubTab:not(thead)").tableDnD();

【解决方案3】：

您的新表格行不可拖动，因为您尚未将它们集成到拖放对象中。它们仍然是静态 HTML，而您的原始行都是花哨且可交互的，因为您在它们上调用了 .tableDnD()。看看在你的新行上调用.tableDnD 是否有效，或者更新.tableDnD 以使用.live()。来自.live() 页面：

说明：将处理程序附加到与当前选择器匹配的所有元素的事件，现在和将来。

.live() 文档页面准确描述了您遇到的问题，值得一看！

【讨论】：