Question

我有一个绑定到upArrow的JS事件：

$('body').on('click', '.UpArrow', function(event) {
    		var row = $(this).closest('tr');
            row.insertBefore(row.prev());
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="placeholderRow NameServiceRow">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
  <td class="UpArrow"></td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>

我想要做的是将TR移到TR之上，类名为NameServiceRow

我已经尝试了很多解决方案但是没有一个能为我工作，如果你有任何解决方案我都会听到。

编辑：

我可能有多个类名为NameServiceRow的行，所以我想要的是将它移到这个类名的第一个出现之上

Answer 1

正在寻找这样的东西吗？如果你需要将当前的tr移动到tr，并且“ClickServiceRow”类出现在单击的上方，则此代码可能正常工作。

$(document).on('click', '.UpArrow', function(event) {
    var row = $(this).closest('tr');
    if(!row.hasClass('NameServiceRow')){
         var parentDiv = row.prevAll('.NameServiceRow:first');
         row.insertBefore(parentDiv);
         row.addClass("NameServiceRow");
         parentDiv.removeClass("NameServiceRow");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="A 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="B 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow NameServiceRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 1" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 2" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow inlineService">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 3" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
	<tr class="placeholderRow">
	  <td class="UpArrow">-</td>
	  <td class="DownArrow">+</td>
	  <td><input value="C 4" class="ref" name="ref2" readonly="" type="text"></td>
	</tr>
</table>

您可以决定是否使用

更改课程

row.addClass("NameServiceRow");
parentDiv.removeClass("NameServiceRow");

Answer 2

以下内容应该有效：

$('body').on('click', '.UpArrow', function(event) {
    var row = $(this).closest('tr');
    row.insertBefore($(".NameServiceRow")[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="placeholderRow NameServiceRow">
  <td class="UpArrow">^</td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow">^</td>
  <td class="DownArrow"></td>
  <td><input value="3" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow NameServiceRow">
  <td class="UpArrow">^</td>
  <td class="DownArrow"></td>
  <td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
  <td class="UpArrow">^</td>
  <td class="DownArrow"></td>
  <td><input value="4" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
  <td class="UpArrow">^</td>
  <td class="DownArrow"></td>
  <td><input value="5" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
</table>

如何在具有已知类名的特定行的第一次出现之后/之前移动行？

2 个答案: