Question

我知道像我这样有十亿个问题，但是我仍然找不到解决方案，而且我知道这是JS的基本知识和基础知识，但是我是这种语言的新手。

好，所以我有桌子

<table>
    <tr id = 'first'>
        <th>#</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>SomeName</td>
        <td>
             <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
             <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
        </td>
      </tr>
    <tr>
        <td>2</td>
        <td>SomeName2</td>
        <td>
             <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
             <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
        </td>
    </tr>
</table>

我需要做一些功能来替换<th>#下的表行。当我将带有＃2 的行放在位置＃1 上时，我想保持正确的行顺序，例如 1,2 等。我拥有行< em> 2 在我表的第一位，但是使用＃2 ，我需要更改它。

它看起来像这样：

    function moveChoiceTo(elem_choice, direction) {
        var tr = elem_choice.parentNode.parentNode,
        td = tr.parentNode;

        if (direction === -1 && tr.previousElementSibling && 
          !tr.previousElementSibling.id) {
            td.insertBefore(tr, tr.previousElementSibling);
        } else if (direction === 1 && tr.nextElementSibling) {
            td.insertBefore(tr, tr.nextElementSibling.nextElementSibling)
        }
    }

但是我仍然不知道如何使我的＃保持不变。我想用它作为JQ，但是我尝试了不同的解决方案，但没有一个起作用。

我尝试过

$(tr.firstElementChild.innerHTML).before($(tr.previousElementSibling.firstElementChild.innerHTML));

 $(tr.firstElementChild.innerHTML).html(tr.previousElementSibling.firstElementChild.innerHTML);

$(tr.firstElementChild.innerHTML).replaceWith($(tr.previousElementSibling.firstElementChild.innerHTML));

和其他一些组合，但我不知道出了什么问题。我是否以错误的方式将JS变量传递给JQ函数？

我的桌子应该像这样：

<table>
    <tr id = 'first'>
        <th>#</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>SomeName2</td>
        <td>
             <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
             <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
        </td>
      </tr>
    <tr>
        <td>2</td>
        <td>SomeName1</td>
        <td>
             <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
             <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
        </td>
    </tr>
</table>

名称，操作和其他行替换了位置，但#id不变

编辑。

好吧，我是地球上最愚蠢的人。

这是我一直在寻找的解决方案：

$(tr.firstElementChild).html(tr.previousElementSibling.firstElementChild.innerHTML++);

当我上去时，

$(tr.firstElementChild).html(tr.nextElementSibling.firstElementChild.innerHTML--);

我下去的时候

Answer 1

使用$('tr').eq(1)获取第二个tr，然后获取所有tr的子代，然后使用eq（1）获取第二个td。

const td1 = $('tr').eq(1).children().eq(1);
const td2 = $('tr').eq(2).children().eq(1);

const temp = td1.text();

td1.text(td2.text());
td2.text(temp);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id='first'>
    <th>#</th>
    <th>Name</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>SomeName</td>
    <td>
      <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
      <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>SomeName2</td>
    <td>
      <a href="" onclick="return moveChoiceTo(this, -1);">Up</a>
      <a href="" onclick="return moveChoiceTo(this, 1);">Down</a>
    </td>
  </tr>
</table>

Answer 2

这是在table元素上使用委托侦听器的简单解决方案：

myTable.addEventListener('click', function({
  target: t
}) {
  if (t.tagName === 'BUTTON' && ['up', 'down'].includes(t.textContent.toLowerCase())) {
    let row = t.closest('tr');
    switch (t.textContent.toLowerCase()) {
      case 'up':
        let prevRow = row.previousElementSibling;
        if (prevRow) {
          row.parentElement.insertBefore(row, prevRow);
        }
        break;
      case 'down':
        let nextRow = row.nextElementSibling;
        if (nextRow) {
          row.parentElement.insertBefore(nextRow, row);
        }
        break;
    }
  }
})

<table id="myTable">
  <thead>
    <tr id="first">
      <th>#</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>SomeName1</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>SomeName2</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>SomeName3</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>SomeName4</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
    <tr>
      <td>5</td>
      <td>SomeName5</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
    <tr>
      <td>6</td>
      <td>SomeName6</td>
      <td>
        <button type="button">Up</button>
        <button type="button">Down</button>
      </td>
    </tr>
  </tbody>
</table>

替换表格中的元素值

2 个答案: