如何在第一次發生具有已知類名的特定行之後/之前移動行？

我有一個JS事件綁UPARROW：如何在第一次發生具有已知類名的特定行之後/之前移動行？

$('body').on('click', '.UpArrow', function(event) { 
 
    \t \t 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所以我要的是將它移到這個類名

來源

2017-07-19 samouray

你的代碼似乎適用於我。當我點擊'UpArrow'時，它將tr移動到prev –

以上我希望它在類名「NameServiceRow」之上移動，而不僅僅是在perv之上 – samouray

嘗試像'row.insertBefore（row.prevAll（「。NameServiceRow」））;' –

正在尋找的東西像這樣的一次出現上面？如果您需要將當前tr移動到tr，並在點擊之上發生類NameServiceRow，則此代碼可能正在運行。

$(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> 
 
\t <tr class="placeholderRow NameServiceRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="A 1" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="A 2" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="A 3" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="A 4" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow NameServiceRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="B 1" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="B 2" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="B 3" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="B 4" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow NameServiceRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="C 1" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="C 2" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow inlineService"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="C 3" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
\t <tr class="placeholderRow"> 
 
\t <td class="UpArrow">-</td> 
 
\t <td class="DownArrow">+</td> 
 
\t <td><input value="C 4" class="ref" name="ref2" readonly="" type="text"></td> 
 
\t </tr> 
 
</table>

你可以決定是否使用

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

來源

2017-07-19 13:18:07 gjijo

我可能有很多類名爲「NameServiceRow」的行，所以從第一個移除它可能是在這種情況下工作，我只有一個TR與這個類名，但如果我有很多人不會工作，你建議先替換什麼？ – samouray

我編輯 – samouray

的問題，同時點擊'UpArrow'，你是否想要將該行移動到只有'NameServiceRow'類的tr上方？ – gjijo

改變類下面的應工作：

$('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>

來源

2017-07-19 13:26:11

我試過了，行留在它的地方。，它劑量移動 – samouray

@samouray它正在爲我工作。如果你點擊「Run code snippet」，然後點擊第一行下的任何一行的「^」，會發生什麼？ –

我已經運行了代碼片段，它正在工作，我直接在我的文件上測試了它，沒有行的移動，我也希望它在這個類的第一次發生之前移動，也許我不清楚我道歉，我編輯過我的問題 – samouray

如何在第一次發生具有已知類名的特定行之後/之前移動行？

回答

相關問題