jQueryオブジェクトの使用中にtrが間違った結果を表示する

Question

trを作成してから、htmlテーブルの最初の行に置き換えようとしています。 私は変数newHeaderRowを持っています。そこでjQueryオブジェクトを追加してから、replaceWithを使って、テーブルの最初の行をこの変数に置き換えます。 問題は、最初の行の代わりに、[オブジェクトのオブジェクト] [オブジェクトのオブジェクト] [オブジェクトのオブジェクト]

しかしそれだけ

を示さないDOM要素がテーブルに追加されていないこと

あります私は

 result = $("<td/>", 
    { 
     align: "center", 
     colspan: var1 
    }).text("something"); 

    newHeaderRow += result; 

のようなDOM要素を作成して自分のコードで3部を持って

具体的には

iが行を交換する

 $('tr[class*="row#"]').eq(n) 
     .replaceWith(newHeaderRow); 

を使用newHeaderRowに加え、いくつかのTDS後。

私は私が無地のJavaScriptを使用している場合、私は何か

result = "<td align='center' colspan='" + countGroupBys + "'>" + "something" + " 
    </td>" 

を使用して、私はnewHeaderRowで3つの文字列を追加し、それが動作するreplaceWith使用することを知っています。 しかし、コードを長くして文字列を読みにくくしたくありません。

jQueryの用語では、置き換えのDOM要素をどのように渡してテーブルを変更できますか？

Answer 1

（$()はjQueryオブジェクトを返すので）あなたがここにそうであるようにあなたは、オブジェクトを連結することはできません。

result = $("<td/>", 
{ 
    align: "center", 
    colspan: var1 
}).text("something"); 

newHeaderRow += result; 

しかし、代わりに、あなたはあなたの要素のコンテンツを取得する必要があるので、あなたが最後に変更することができますがこの1とライン：あなたが唯一のjQueryオブジェクトとそれを交換する必要がある場合

newHeaderRow += result[0].outerHTML; 

明らかに、[0].outerHTMLの必要はありません。 別のポイント：.replaceWith()もターゲット要素（この場合は<tr>）を置き換えますので、newHeaderRowにも<tr>タグが含まれていることを確認してください。

Answer 2

文字列のようにjQueryオブジェクトを追加しようとしています。最初に文字列に変換してみてください。

newHeaderRow += result[0].outerHTML; 

var newTds = ""; 
 
for (var i = 0; i < 3; i++) { 
 
    var td = $('<td>', { 
 
    align: "center", 
 
    colspan: 1 
 
    }).text('Header: ' + (i+1)); 
 
    
 
    newTds += td[0].outerHTML 
 
} 
 

 
$('#apple').replaceWith(newTds)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td id="apple"> 
 
     Apple 
 
    </td> 
 
    </tr> 
 
</table>

：

newHeaderRow += result; 

このなる必要があります：あなたはそれがouterHTMLだ

ための内部Node要素を尋ねることによってこれをこれを行いますこのフィドルで

例： https://jsfiddle.net/fghajk48/

Answer 3

はちょうどそれにnewHeaderRow jQueryオブジェクトとappend()セルオブジェクトを作る

var newHeaderRow = $('<tr>'); 

// ...... 

result = $("<td/>", { 
    align: "center", 
    colspan: var1 
}).text("something"); 

newHeaderRow.append(result); 

//..... 

$('tr[class*="row#"]').eq(n) 
    .replaceWith(newHeaderRow);