在 jQuery 中获取 <TR> 的整个 html 的最简单方法是什么？ (包括 tr 本身，而不是 tr innerhtml)并将其与另一个交换？我在乱用 replaceWith，但那是在交换 innerHtml，我想交换整个 TR html。看起来这对 jquery 来说应该是一件容易的事。我在想一定有一种方法可以通过索引引用 TR，并且非常简单:
temp = table.children[4];
table.children[4] = table.children[7]
table.children[7] = temp;
当然这是伪代码，但我正在寻找像 jQuery 中那样简单的东西......
最佳答案
最好的办法是将它包装在一个可重用的自定义函数中:
$.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>
请注意，元素索引是从零开始的，因此 :eq() 中的 1 和 3 .
关于jquery - 通过 jQuery(不是拖放)在表中交换行 HTML 的最简单方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2078626/