使用JQuery添加新表行的问题

时间:2011-02-24 11:24:09

标签: jquery html-table

我按照以下说明添加新表的行: 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();   });

请协助。

3 个答案:

答案 0 :(得分:4)

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

.tableDnDUpdate()

作为documentation

  

导致表更新其行,以便拖放功能有效,例如,如果您添加了一行。

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

  

描述:为现在和未来与当前选择器匹配的所有元素附加事件的处理程序。

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