0

アプリに大量の HTML のチャンクが入ってきますが、それを制御することはできません。それらには、削除したいレイアウト用のテーブルが含まれています。それらは複雑でネストすることができます。

私が望むのは、基本的にテーブルから HTML コンテンツを抽出して、それをアプリ内の他のテンプレートに挿入できるようにすることです。

jQueryまたはプレーンJSのみを使用でき、サーバー側のトリックはありません。

仕事をする良いヒントのjQueryプラグインを知っている人はいますか?

Littm - 基本的に td タグからコンテンツを抽出することを意味します。完了時にコードにテーブルの痕跡を残したくありません。ありがとう！

問題の HTML のタイプの例を次に示します。それはすべて、古いアプリケーションから XHR を介して取得されるため、マークアップを制御することはできません。私が望むのは、テーブルを完全に取り除き、残りの HTML またはその他のテキスト コンテンツだけを残すことです。

<table>
    <tr><td colspan="4"></td></tr>
    <tr>
        <td width="1%"></td>
        <td width="40%" style="padding-left: 15px">
        <p>Your access level:  <span>Total</span></p>
        </td>
        <td width="5%">
            <table><tr><td><b>Please note</b></td></tr></table>
        </td>
        <td width="45%" style="padding-left: 6px" valign="top"><p>your account</p></td>
    </tr>
    <tr><td colspan="4">&nbsp;</td></tr>
    <tr>
        <td width="1%"></td>
        <td width="40%" style="padding-left: 15px">
            <table>
                <tr>
                    <td align="right">Sort Code:  </td>
                    <td align="center"><strong>22-98-21</strong></td>
                </tr>
                <tr>
                    <td align="right">Account Number:  </td>
                    <td><strong>1234959</strong></td>
                </tr>
            </table>
        </td>
        <td width="5%"></td>
        <td width="45%" style="padding-left: 6px">Your account details for</td>
    </tr>
</table>

私はもう試した;

var data = ""
$("td").each(function(){
  data += $(this).html()
});
$("article").append(data);
$("table").remove();

ただし、vardataにはネストされた td タグがまだ含まれています。私は JS の専門家ではないので、他に何を試すべきかわかりません....

4

2 に答える 2

1

X 個のテーブルがあるとします。

これらからすべてのコンテンツ情報を抽出するには、次のような方法を試すことができます。

// Array containing all the tables' contents
var content = [];

// For each table...
$("table").each(function() {

    // Variable for a table
    var tb = [];
    $(this).find('tr').each(function() {

        // Variable for a row
        var tr = [];

        $(this).find('td').each(function() {
            // We push <td> 's content
            tr.push($(this).html());
        });

        // We push the row's content            
        tb.push(tr);
    });
    // We push the table's content
    content.push(tb);
});

たとえば、次の 2 つのテーブルがあるとします。

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>A</td>
    </tr>
</table>

<table>
    <tr>
        <td>r1</td>
        <td>r2</td>
        <td>r3</td>
    </tr>
    <tr>
        <td>rA</td>
        <td>rB</td>
    </tr>
    <tr>
        <td>rP</td>
    </tr>
</table>

配列contentは次のようになります。

content = [ [ [1, 2], [A] ] ] , [ [r1, r2, r3], [rA, rB], [rP] ] ]
            \_______________/   \______________________________/
                 1st table                2nd table

最初のテーブルにアクセスしたい場合はcontent[0]、たとえばアクセスするだけです。

ここで、 と id を持つ DIV があり、my_divそこにいくつかのテーブル コンテンツを出力したいとします。

たとえば、最初のテーブルのみが必要だとします。次に、次のようにします。

// Note: content[0] = [[1, 2], [A]]

var to_print = "<table>";

for(var i=0; i<content[0].length; i++) {
    to_print += "<tr>";     
    for(var j=0; j<content[0][i].length; j++)       
        to_print += "<td>"+ content[0][i][j] +"</td>";              

    to_print += "</tr>";        
}

to_print += "</table>";

$("#my_div").html(to_print);

次のようなものが得られます。

<div id="my_div">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>A</td>
        </tr>
    </table>
</div>

お役に立てれば。

于 2012-09-24T10:28:27.367 に答える
0

編集:それを行うには、再帰関数を作成する必要があります。

「td」を値として取得する関数を作成するだけです。

function searchTexts(td) {
     if (td.find("td")) {
           searchTexts(td.find("td"));
     }
     td.each(function(){
         data += $(this).html()
         $(this).remove(); // remove it for avoiding duplicates
     });
}

次に、jQuery オブジェクトを関数に渡して呼び出します。

于 2012-09-24T09:48:40.967 に答える