Question

我正在尝试创建一个html表，用户可以通过向上和向下箭头订购行。但是我想要一个字段，保持不变，即id字段。

Html代码：

<table class="table routes_t">
    <thead>
        <tr>
            <th>#</th>
            <th>Local</th>
            <th>Coordenadas</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ord">1</td>
            <td>Template2</td>
            <td>37.13318,-8.5392</td>
            <td>
                <span class="id" data-id="9"></span>
                <a href="#" onclick="remove(9)" "=""><i class="glyphicon glyphicon-remove pull-right"></i></a>
                <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a>
                <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a>
            </td>
        </tr>
        <tr>
            <td class="ord">2</td>
            <td>Teste_unserial</td>
            <td>37.13008,-8.54247</td>
            <td>
                <span class="id" data-id="10"></span>
                <a href="#" onclick="remove(10)" "=""><i class="glyphicon glyphicon-remove pull-right"></i></a>
                <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a>
                <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a>
            </td>
        </tr>
    </tbody>
</table>

我的jQuery是：

$(document).ready(function(){
    $(".uporder,.downorder").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".downorder")) {
            row.children('td:not(:first)').insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});

到目前为止发生的事情是我想要触摸的字段未被触及，但其他字段移动到不需要的位置，如<tbody>的上方。

Jsfiddle

Answer 1

尝试

$(document).ready(function () {
    $(".uporder,.downorder").click(function () {
        var row = $(this).closest("tr"),
            rftd = row.find('.ord'),
            id = row.find('.ord').text(),
            tar, tftd;
        if ($(this).is(".downorder")) {
            tar = row.prev();
            row.insertBefore(tar);
        } else {
            tar = row.next();
            row.insertAfter(tar);
        }
        if (tar.length) {
            tftd = tar.find('.ord');
            rftd.text(tftd.text());
            tftd.text(id)
        }
    });
});

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table routes_t">
  <thead>
    <tr>
      <th>#</th>
      <th>Local</th>
      <th>Coordenadas</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ord">1</td>
      <td>Template2</td>
      <td>37.13318,-8.5392</td>
      <td>
        <span class="id" data-id="9"></span>
        <a href="#" onclick="remove(9)" ><i class="glyphicon glyphicon-remove pull-right"></i></a>
        <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a>
        <a href="#" class="downorder"><i class="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css glyphicon-arrow-up pull-right"></i></a>
      </td>
    </tr>
    <tr>
      <td class="ord">2</td>
      <td>Teste_unserial</td>
      <td>37.13008,-8.54247</td>
      <td>
        <span class="id" data-id="10"></span>
        <a href="#" onclick="remove(10)"><i class="glyphicon glyphicon-remove pull-right"></i></a>
        <a href="#" class="uporder"><i class="glyphicon glyphicon-arrow-down pull-right"></i></a>
        <a href="#" class="downorder"><i class="glyphicon glyphicon-arrow-up pull-right"></i></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

将以下jQuery放在$（document）.ready（function（）{}）;

中

$(".uporder,.downorder").click(function(){
    var current_row = $(this).parents("tr");
    var row;
    if($(this).hasClass("uporder"))
        row = $(this).parents("tr").prev();
    else
        row = $(this).parents("tr").next();            
    if($("tr").index(row) != -1){
        var loc = $(row).children("td:nth-child(2)").text();
        var coord = $(row).children("td:nth-child(3)").text();
        $(row).children("td:nth-child(2)").text($(current_row).children("td:nth-child(2)").text());
        $(row).children("td:nth-child(3)").text($(current_row).children("td:nth-child(3)").text());
        $(current_row).children("td:nth-child(2)").text(loc);
        $(current_row).children("td:nth-child(3)").text(coord);
    }
});

这是fiddle。

更改除一列jquery之外的表行顺序

2 个答案: