Question

我有上下移动的表行，但我的问题是数据表行替换了表头（第一行）。

我想要一个固定的第一行，这样当您单击向上箭头时，不会将该行向上移动以替换标题。

我已经尝试了一些条件逻辑来检查当前行是否是表的第一行，但它不起作用。

$(document).ready(function(){

<!--- Move: click to move rows up or down --->
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");

<!-- this var does not work -->
var firstrow = $('table')[0].rows[0]; 

<!-- Check that is not the first row NEEDS FIXED -->
if (row != firstrow){

if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
}
});
});

<table>
<tr>
<td>Do Not Replace Me</td>
<td >&nbsp;</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
</table>

表必须保持原样，我不能将td改为th或类似的东西。

我希望有一种方法可以修复这两行代码。

Answer 1

正如我想你知道的那样（鉴于你的免责声明html必须'保持原样......'），如果你可以将标题/第一行放入thead元素并且更容易剩余部分变为tbody，但有一种方式适用于html'原样：'

$(".up,.down").click(function() {
    var row = $(this).parents("tr:first");

    var firstrow = $('table tr:first');

    if ($(this).is(".up") && row.prevAll().length > 1) {
        row.insertBefore(row.prev());
    }
    else if ($(this).is(".down") && row.nextAll().length > 0) {
        row.insertAfter(row.next());
    }
    else {
        return false;
    }
});

JS Fiddle demo

顺便说一句，顺便说一下，你的脚本可能已经从评论中产生了错误（虽然我怀疑是为了我们的利益而不是在你的实际JavaScript中添加的）语法：

<!-- comment text -->

是html语法，并且在<script></script>标记的范围内无效，要评论JavaScript使用：

// single-line comment
// which needs to have the double-slash
// preface each comment-line...

或：

/* This is a multi-line
   comment, and this text
   will happily remain commented-out
   until you get to
   one of these comment-close things, just to the right -> */

参考文献：

Answer 2

jQuery index函数应该是一些帮助。

$(".up, .down").click(function() {
    // get parent tr
    var $row = $(this).parents('tr:first');
    var $link = $(this);
    // count all tr
    var count = $('table tr').length;
    // if tr isn't the first
    if($row.index() !== 0) {
        // if direction is up and there is a tr above
        if($link.hasClass('up') && $row.index() > 1) {
            $row.insertBefore($row.prev());
        } 
        // if direction is down and there is a tr below
        else if($link.hasClass('down') && $row.index() < count - 1) {
            $row.insertAfter($row.next());
        }
    }
});

Answer 3

我最近遇到了一个类似的问题，我的行在我表格中的“标题”行上方移动。

我在jquery中使用基本类调用解决了它并将类分配给表。这只是为元素规范添加了另一个深度级别，因此它忽略了不符合的表行。

试试这个：

var row = $（this）.parents（“tr。 MoveableRow ：first”）;

然后添加到每个标签，class =“MoveableRow”。

例如：<tr class="MoveableRow">

Jquery移动表行但不过去标题

3 个答案: