2015-03-31 3 views
-2

У меня есть стол с одним <tr> и 6 <td> внутри. Я использую немного кода, чтобы удалить tr, а затем поместив новый тег tr после последнего td.JQuery appendTo для конкретного ID таблицы не работает

Перед

<table id="datatable" class="datatable_class"> 
<tbody> 
    <tr> 
     <td id="td1">title 1</td> 
     <td id="td2">contents 1 need to go to new tr</td> 
     <td id="td3">title 2</td> 
     <td id="td4">contents 2 need to go to new tr</td> 
     <td id="td5">title 3</td> 
     <td id="td6">contents 3 need to go to new tr</td> 
    </tr> 
</tbody> 

После

<table id="datatable" class="datatable_class"> 
<tbody> 
     <td id="td1">title 1</td> 
     <td id="td2">contents 1 need to go to new tr</td> 
     <td id="td3">title 2</td> 
     <td id="td4">contents 2 need to go to new tr</td> 
     <td id="td5">title 3</td> 
     <td id="td6">contents 3 need to go to new tr</td> 
    <tr></tr> 
</tbody> 

То, что я пытаюсь добиться в настоящее время является .appendTo() все мои вновь созданные тр нечетной ТД. это работает отлично, но проблема в том, что у меня есть еще одна таблица в моем <body>, и когда я начинаю перемещать td, я также перемещаю td из моей другой таблицы в эту новую tr.

Я попытался с помощью этого фильтра, не повезло

$("#datatable > tbody > td.odd").appendTo('#fix_name').css("background-color", "red");

Here is a Fiddle

+0

почему a -1 по этому вопросу? извините за попытку узнать –

+0

* после * HTML в недопустимом HTML; Элементы 'td' всегда должны иметь родительский элемент' tr'. Не уверен, что вам нужны все эти 'id'. ... Можете ли вы четко указать, чего хотите достичь. – PeterKA

+2

'.odd' не является классом в вашем HTML. вы должны использовать ': odd' – cr0ss

ответ

2

Вот как вы можете переместить нужные ячейки таблицы, не влияя на вторую таблицу. А точнее, вы можете использовать идентификатор таблицы вместо table:first - #datatable td:odd - более точный селектор.

$('#simple_button').click(function() { 
    $('<tr id="fix_name"/>').insertAfter($("#td6").closest('tr')); 

    $('table:first td:odd').appendTo('#fix_name').css("background-color", "red"); 
}); 

DEMO

1

Извинения, если это не совсем то, что вы надеетесь - я немного смущен, почему вы удаления TR. Но, если я понимаю, что вы пытаетесь сделать, я думаю, вы можете исправить вашу проблему довольно легко, изменив это:

$("#datatable > tbody > td.odd").appendTo('#fix_name').css("background-color", "red"); 

к этому:

$('#datatable td:odd').appendTo('#fix_name').css("background-color", "red"); 

(Изменение селектор (» #datatable td: odd ")). Вы можете проверить результаты с помощью этого edit of your fiddle, который, я думаю, делает то, что вы хотите.

Надеюсь, это сработает для вас; в противном случае я бы рекомендовал переосмыслить удаление. Обратите внимание, что добавление id в первую строку (или любой другой механизм выбора первой строки, например, $('#data-table tbody tr:nth-child(1)')) будет работать точно так же и поддерживать правильное форматирование. Вы можете проверить пример here.

+0

спасибо за помощь. Я очень новичок в jquery и программировании в целом, поэтому хорошо, что люди помогают. очень расстраиваюсь, чтобы спуститься, проголосовали по моему вопросу. Приветствия за ответы. Добавление идентификатора может быть правильным решением для его разработки;) –

Смежные вопросы