Проблемы с добавлением новой строки таблицы с JQuery - PullRequest
Новая
       2

Проблемы с добавлением новой строки таблицы с JQuery

0 голосов
/ 24 февраля 2011

Я следую инструкции по добавлению новой строки таблицы из: Добавить строку таблицы в 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 ]

4 голосов
/ 17 мая 2012

Плагин tableDnD имеет метод, который мог быть добавлен с момента публикации этого вопроса. 

.tableDnDUpdate()

В качестве документации говорится

причинатаблица обновляет свои строки, чтобы работала функция перетаскивания, если, например, вы добавили строку.

0 голосов
/ 24 февраля 2011

Ваши новые строки таблицы не перетаскиваются, потому что вы не интегрировали их в объект перетаскивания. Они остаются в статическом HTML, в то время как ваши исходные строки являются модными и интерактивными, потому что вы назвали их .tableDnD() Посмотрите, работает ли вызов .tableDnD в ваших новых строках, или обновите .tableDnD, чтобы использовать .live(). Со страницы .live():

Описание: Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

Страница документации .live() точно описывает проблему, с которой вы столкнулись, которую стоит посмотреть!

0 голосов
/ 24 февраля 2011

Попробуйте переинициализировать плагин tableDnD после вставки новой строки.

Другим решением было бы клонировать одну существующую строку и изменить в ней данные.

...