上下

上下

关注
发信
关注(28)粉丝(399)

javascript - 如何在jQuery中上下移动表行时修复特定的列值

我面临着上下移动表格行的功能问题。在我的代码中，行可以完美地上下移动，但是我不想更改特定的列值。就我而言，它将是按钮列之前最右边的列。请看一下我现有的代码，并帮助我解决。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
table.myTable {
    counter-reset: rowNumber;
}

table.myTable tr {
    counter-increment: rowNumber;
}

table.myTable tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
button.uparrow{
    background-color:#FFCC66;
}
button.downarrow{
    background-color:#66FF66;
}
</style>
<script>
function get_previoussibling(n)
{
    x=n.previousSibling;
    while (x.nodeType!=1)
      {
      x=x.previousSibling;
      }
    return x;
}

function get_nextsibling(n)
{
    x=n.nextSibling;
    while ( x != null && x.nodeType!=1)
      {
      x=x.nextSibling;
      }
    return x;
}
function MoveUp()
    {
        var table,
            row = this.parentNode;

        while ( row != null ) {
            if ( row.nodeName == 'TR' ) {
                break;
            }
            row = row.parentNode;
        }
        table = row.parentNode;
        table.insertBefore ( row, get_previoussibling( row ) );
    }

    function MoveDown()
    {
        var table,
            row = this.parentNode;

        while ( row != null ) {
            if ( row.nodeName == 'TR' ) {
                break;
            }
            row = row.parentNode;
        }
        table = row.parentNode;
        table.insertBefore ( row, get_nextsibling ( get_nextsibling( row ) ) );
    }
</script>
<title>Moving Row Up/Down</title>
</head>

<body>
<table class="myTable" border="1" width="80%">
    <tr >
    <td></td>
    <td>Justine</td>
    <td>Male</td>
    <td>10</td>
    <td style="width:30px;"><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td style="width:30px;"><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
    <td></td>
    <td>Michael</td>
    <td>Male</td>
    <td>21</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
    <td></td>
    <td>Robert</td>
    <td>Male</td>
    <td>24</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
    <td></td>
    <td>Samuel</td>
    <td>Male</td>
    <td>30</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
    <td></td>
    <td>Clifa</td>
    <td>Female</td>
    <td>34</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
</table>
</body>
</html>


例如如果我单击第三行的上按钮或下按钮，则在我的情况下，整行与上一行或下一行的上下位置分别互换。向上按钮21不应将位置更改为24，向下按钮30不应将位置更改为24。

请帮忙。

最佳答案

遵循当前模式时执行此操作的一种方法是在切换时交换目标元素的文本内容。

快速示例：https://codepen.io/davidatthepark/pen/NvVEaP?editors=1010



function get_previoussibling(n) {
  x = n.previousSibling;
  while (x.nodeType != 1) {
    x = x.previousSibling;
  }
  return x;
}

function get_nextsibling(n) {
  x = n.nextSibling;
  while (x != null && x.nodeType != 1) {
    x = x.nextSibling;
  }
  return x;
}
function MoveUp() {
  var table,
    row = this.parentNode,
    rowText,
    previousSibling;

  while (row != null) {
    if (row.nodeName == "TR") {
      break;
    }
    row = row.parentNode;
  }
  table = row.parentNode;
  previousSibling = get_previoussibling(row);
  rowText = row.children[3].textContent;
  row.children[3].textContent = previousSibling.children[3].textContent;
  previousSibling.children[3].textContent = rowText;

  table.insertBefore(row, previousSibling);
}

function MoveDown() {
  var table,
    row = this.parentNode,
    rowText,
    nextSibling;

  while (row != null) {
    if (row.nodeName == "TR") {
      break;
    }
    row = row.parentNode;
  }
  table = row.parentNode;
  nextSibling = get_nextsibling(row);
  rowText = row.children[3].textContent;
  row.children[3].textContent = nextSibling.children[3].textContent;
  nextSibling.children[3].textContent = rowText;

  table.insertBefore(row, get_nextsibling(get_nextsibling(row)));
}

table.myTable {
    counter-reset: rowNumber;
}

table.myTable tr {
    counter-increment: rowNumber;
}

table.myTable tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
button.uparrow{
    background-color:#FFCC66;
}
button.downarrow{
    background-color:#66FF66;
}

<table class="myTable" border="1" width="80%">
  <tr>
    <td></td>
    <td>Justine</td>
    <td>Male</td>
    <td>10</td>
    <td style="width:30px;"><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td style="width:30px;"><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
  </tr>
  <tr>
    <td></td>
    <td>Michael</td>
    <td>Male</td>
    <td>21</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
  </tr>
  <tr>
    <td></td>
    <td>Robert</td>
    <td>Male</td>
    <td>24</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
  </tr>
  <tr>
    <td></td>
    <td>Samuel</td>
    <td>Male</td>
    <td>30</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
  </tr>
  <tr>
    <td></td>
    <td>Clifa</td>
    <td>Female</td>
    <td>34</td>
    <td><button class="uparrow" onClick="MoveUp.call(this);">&#8679;</button></td>
    <td><button class="downarrow" onClick="MoveDown.call(this);">&#8681;</button></td>
  </tr>
</table>

关于javascript - 如何在jQuery中上下移动表行时修复特定的列值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46089695/

10-09 22:45
Powered by LMLPHP ©2024 上下 0.034188