如何让javascript代码与按钮一起工作以重新排序表行？

Question

下面的代码执行表中行的定位。

javascript中的以下代码与input type =“button”完美配合

<input type = "button" value = "move up" class = "move up" />

如何使用下面的按钮使下面的JavaScript功能工作？

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

我在下面使用的Javascript代码

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

代码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>

Answer 1

要使用button创建新标记以执行与input相同的操作，请将脚本更改为此

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

然后将move up添加到buttons类

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

---

如果您无法将类添加到button，请使用此脚本并评估button的value属性，以查找是“向上”还是“向下”。

$('#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);
});

注意，在上面我使用属性选择器button[value="move up"]来定位button。当然，人们也可以使用其现有的一个类。

Answer 2

而不是input.move使元素为button.move，因为elemet是一个按钮而不是input。这是更新的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>