2017-12-04 9 views
2

ここにはappend()を使用しているので、同じ行を再度挿入する必要があると思われるコードがあります。最初に行を削除しないでください。なぜこのjavascriptコードはテーブルの行を追加していない

jQuery(document).ready(function(){ 
 
jQuery('#add_rows').click(function(){ 
 
    
 
    var table = jQuery("#myTable"); 
 
    var rows = table.find('tr:gt(0)').toArray(); 
 
    for (var i = 0; i < rows.length; i++){table.append(rows[i])} 
 
}) 
 

 
});
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> 
 
<title>Sort a HTML Table Alphabetically</title> 
 
</head> 
 
<body> 
 
<button id ="add_rows">Add rows </button> 
 

 
<table id="myTable"> 
 
    <tr> 
 
    <th class="sort_table">Name</th> 
 
    <th class="sort_table">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
</table>

私は、それが実際に(私が予想したように)行を追加しますが、最初のケースでは、それは同じことをしていませんfor (var i = 0; i < rows.length; i++){table.append('<tr><td>data1</td><td>data2</td></tr>')}

を使用している場合、私はそれがあると思います私たちはそこにオブジェクトを使用しているが、私は確信していないという事実を持って何かをする

誰かがその理由を説明することができます

ありがとう

+0

選択した現在の行が移動します。 jQueryの.clone()メソッドをチェックしたいかもしれません。 – kmdm

+0

whch行が正確に現在の行を移動していますか?pls説明はありますか?@kmdm – user9050678

答えて

4

ドキュメントに既に存在する子を追加すると、ドキュメントが移動します。

これらの行を「クローン」する場合は、table.find("tr:gt(0)").clone();を使用して追加します。

+0

ありがとう、私は '文書内に既に存在する子を追加すると移動します。'非常に有益です、ありがとう – user9050678

関連する問題