Какой самый простой способ обмена строк HTML в таблице с помощью jQuery (не перетаскивать) - PullRequest
Новая
       14

Какой самый простой способ обмена строк HTML в таблице с помощью jQuery (не перетаскивать)

5 голосов
/ 16 января 2010

Какой самый простой способ в jQuery взять весь html для <TR> (включая сам tr, а не tr innerhtml) и заменить его другим? Я возиться с replaceWith, но это обмен внутренним HTML, и я хочу обменять весь HTML TR. кажется, это должно быть легкой задачей для jquery. Я думаю, что должен быть способ ссылаться на ТР по индексу и так просто: 

temp = table.children[4];
table.children[4] = table.children[7]
table.children[7] = temp;

конечно, это псевдокод, но я ищу что-то такое же простое, как в jQuery ...

Ответы [ 3 ]

7 голосов
/ 16 января 2010

Хорошее было бы обернуть его в многократно используемую пользовательскую функцию: 

$.fn.swap = function(other) {
    $(this).replaceWith($(other).after($(this).clone(true)));
};

Так что вы можете использовать его как: 

one.swap(other);

clone(true) используется для учета событий.

Вот SSCCE , который демонстрирует перестановку строк в следующей строке (если есть): 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2078626 part I</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $.fn.swap = function(other) {
                $(this).replaceWith($(other).after($(this).clone(true)));
            };
            $(document).ready(function() {
                $('tr').css('cursor', 'pointer').click(function() {
                    $(this).swap($(this).next());
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody>
                <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>
                <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>
                <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>
                <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>
                <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>
            </tbody>
        </table>
    </body>
</html>

Вот SSCCE, который демонстрирует, как его можно использовать в вашем конкретном случае: 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2078626 part II</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $.fn.swap = function(other) {
                $(this).replaceWith($(other).after($(this).clone(true)));
            };
            $(document).ready(function() {
                $('button.swap').click(function() {
                    $('#table tr:eq(1)').swap($('#table tr:eq(3)'));
                });
            });
        </script>
    </head>
    <body>
        <table id="table">
            <tbody>
                <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>
                <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>
                <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>
                <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>
                <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>
            </tbody>
        </table>
        <button class="swap">swap rows 2 and 4</button>
    </body>
</html>

Обратите внимание, что индекс элемента основан на нуле, поэтому 1 и 3 в :eq().

1 голос
/ 16 января 2010

Это должно сделать это: 

var sourceRow = $('tr').eq(7);
var targetRow = $('tr').eq(4);

targetRow.after(sourceRow.clone());
sourceRow.replaceWith(targetRow);

На простом английском языке он вставляет копию первой строки после второй строки, а затем заменяет исходную первую строку второй.

Причина, по которой я вставляю клон первого ряда, а не сам первый ряд, заключается в том, что таким образом мы не теряем позицию первого ряда и можем правильно расположить второй ряд.

Если я правильно помню, использование replaceWith с объектом jQuery вытащит элемент из его исходного места и вставит в новое место, но если это не так, вам придется удалить также targetRow , В противном случае это должно сработать.

0 голосов
/ 16 января 2010

На основании документации replaceWith (http://docs.jquery.com/Manipulation/replaceWith#content) должен делать то, что вы хотите, возможно, используемый вами селектор нацелен на что-то другое, чем tr? 

$("tr").click(function () {
  $(this).replaceWith("<tr><td>Something New!</td></tr>");
});
...