如何使javascript代码使用按钮对表行重新排序？

下面的代码用于定位表中的行。

下面的javascript代码与输入type=“button”完美配合

编码Html

<table class="table" id="mytable">
  <tr>
    <td>row 1</td>
    <td>
      <input type="button" value="move up" class="move up" />
      <button type="submit" class="btn btn-light" value="move up">
        <span class="glyphicon glyphicon-hand-up"></span>
      </button>
    </td>
    <td>
      <input type="button" value="move down" class="move down" />
      <button type="submit" class="btn btn-light" value="move down">
        <span class="glyphicon glyphicon-hand-down"></span>
      </button>
    </td>
  </tr>
  <tr>
    <td>row 2</td>
    <td>
      <input type="button" value="move up" class="move up" />
      <button type="submit" class="btn btn-light" value="move up">
        <span class="glyphicon glyphicon-hand-up"></span>
      </button>
    </td>
    <td>
      <input type="button" value="move down" class="move down" />
      <button type="submit" class="btn btn-light" value="move down">
        <span class="glyphicon glyphicon-hand-down"></span>
      </button>
    </td>
  </tr>
</table>

第1行
第2排

要使用

按钮创建新标记，请将脚本更改为

$('#mytable button.move').click(function() {
    var row = $(this).closest('tr');
    if ($(this).hasClass('up'))
        row.prev().before(row);
    else
        row.next().after(row);
});

然后将
上移
添加到
按钮
s类

<button type = "submit" class = "btn btn-light move up" value = "move up">
   <span class = "glyphicon glyphicon-hand-up"> </ span>
</ button>

注意，在上面的示例中，我使用属性选择器
按钮[value=“move up”]
以
按钮为目标。当然，也可以使用它现有的一个类。
而不是
输入。移动
使元素成为
按钮。移动
，因为元素是一个按钮而不是
输入。这里是更新的JS

$('#mytable button.move').click(function() { 
var row = $(this).closest('tr'); 
if ($(this).hasClass('up'))//update call here or add to html 
class row.prev().before(row); 
 else row.next().after(row); 
});

观察上面的评论更新类有添加到按钮类如下

 <button type = "submit" class = "btn btn-light up" value = "move up">    
    <span class = "glyphicon glyphicon-hand-up"> </ span> 
    </ button>

您是否在询问如何添加事件侦听器？？
<button type = "submit" class = "btn btn-light move up" value = "move up">
   <span class = "glyphicon glyphicon-hand-up"> </ span>
</ button>

$('#mytable button[value="move up"]').click(function() {
    var row = $(this).closest('tr');
    if ($(this).val().contains('up'))
        row.prev().before(row);
    else
        row.next().after(row);
});

$('#mytable button.move').click(function() { 
var row = $(this).closest('tr'); 
if ($(this).hasClass('up'))//update call here or add to html 
class row.prev().before(row); 
 else row.next().after(row); 
});

 <button type = "submit" class = "btn btn-light up" value = "move up">    
    <span class = "glyphicon glyphicon-hand-up"> </ span> 
    </ button>