-4

ボタンがあります。それをクリックすると、divからHTMLを取得したいと思います。この div にはいくつかのテーブル行が含まれています。

小さなマークアップ

<div class="new">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</div>​

HTML を取得してテーブルに配置したい場合、何か問題が発生します。

私が得るもの$('.new').html()

<strong>New</strong>
hi

jQueryは<tr><td>部品を取らないようです。

これを達成する方法を知っている人はいますか？

http://jsfiddle.net/PQXxV/

4

7 に答える 7

4

あなたのマークアップは無効です.htmlテキストをそのように書いたからといって、ブラウザがそれを必要に応じて解析するわけではありません.ルールがあり、マークアップが無効な場合は修正しようとします.

テンプレートの場合は、script タグを使用できます。

<script type="x-template" class="new">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</script>

<table>
    <tr>
        <td><strong>Old</strong></td>
        <td>Hello</td>
    </tr>
</table>

デモ: http://jsfiddle.net/PQXxV/10/

于 2012-12-18T08:46:05.447 に答える
1

<tr>内部で<td>のみ有効です。<table>内部にあるdivことは単純に無視されます。テーブル内に配置する必要があります: http://jsfiddle.net/PQXxV/5/

そして、ここにコードがあります：

$('table').append($('.new').html());

alert($('.new tbody').html());
​

このような html の場合:

<div class="new" style="display:none;">
    <table>
       <tr>
           <td><strong>New</strong></td>
           <td>Hi</td>
       </tr>
    </table>
</div>
于 2012-12-18T08:45:17.817 に答える
0 
<div class="new">
    <table>
        <tr>
            <td><strong>New</strong></td>
            <td>Hi</td>
        </tr>
   </table>
</div>

を使用してアクセス$(".new table").html()し、必要な値を切り取ります。

于 2012-12-18T08:45:22.333 に答える
0

chrome を使用して div を class で検査すると、Chrome が を取り除き、これだけを残すnewことがわかります。<tr><td>

<div class="new" style="display:none;">    
        <strong>New</strong>
        Hi    
</div>

これがアラートが返すものです。したがって、質問に答えるに.html()は、完全な html を返します。

于 2012-12-18T08:45:42.123 に答える
0

ブラウザは、私たちが書いた html を正確にレンダリングしません。いくつかのタグを無視し、いくつかのタグを追加します。これは、あなたの例で発生します。テーブル要素がないため、tr と td は無視されます

ここにJSフィドルがあります

<div class="new" style="display:none;">
    <table>
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</table>
</div>
于 2012-12-18T08:47:05.767 に答える
0

jQuery.html()ドキュメントから、

このメソッドは、ブラウザーのinnerHTML プロパティを使用します。一部のブラウザーは、元のドキュメントの HTML ソースを正確に複製する HTML を返さない場合があります。たとえば、Internet Explorer では、属性値に英数字しか含まれていない場合、属性値を囲む引用符が省略されることがあります。

trに直接ネストできないため、html 構造が無効divです。これを に変更するとtable、すべてが機能します。

于 2012-12-18T08:47:58.800 に答える
-2 
<div class="new" style="display:none;">
    <tr>
        <td><strong>New</strong></td>
        <td>Hi</td>
    </tr>
</div>

<table>
    <tbody>
    <tr>
        <td><strong>Old</strong></td>
        <td>Hello</td>
    </tr>
    </tbody>
</table>
Add a tbody tag and then use the below will get the result
$('table > tbody').append($('.new').html());
于 2012-12-18T08:49:55.870 に答える