Wednesday, February 25, 2009 - 文章

處理一個案子，同事給了我一個HTML的樣版(其他ASPX產生的)，我要借它的排版用在其他地方，數字及文字欄位的部分要轉成[$FieldName$]的格式，去掉不必要的id以及style設定，範例如下:

<!-- 原始網頁 -->

<tr id="OrderUserControl1_tr_ORDER_PRZ" style="DISPLAY:block;">

    <td class="title">委託價格</td>

    <td><span id="OrderUserControl1_lab_ORDER_PRZ">123.45</span></td>

</tr>

<tr id="OrderUserControl1_tr_TRADE_CRNCY" style="DISPLAY:block;">

    <td class="title">交易幣別</td>

    <td><span id="OrderUserControl1_lab_TRADE_CRNCY">USD</span></td>

</tr>

<tr id="OrderUserControl1_tr_CLEAR_CRNCY" style="DISPLAY:block;">

    <td class="title">交割幣別</td>

    <td><span id="OrderUserControl1_lab_CLEAR_CRNCY">USD</span></td>

</tr>

<!-- 想要翻成以下的樣版 -->

<TR>

<TD class=title>委託價格</TD>

<TD>[$ORDER_PRZ$]</TD></TR>

<TR>

<TD class=title>交易幣別</TD>

<TD>[$TRADE_CRNCY$]</TD></TR>

<TR>

<TD class=title>交割幣別</TD>

<TD>[$CLEAR_CRNCY$]</TD></TR>

<TR>

欄位筆數不超過五十筆，手工改不會花太久時間，但心想HTML操弄是jQuery最擅長的領域，決定讓它露兩手瞧瞧!

$(function() {

    $("span[id^=OrderUserControl1_lab_]").each(function() {

        var spn = $(this);

        if (spn.is(":parent"))

            spn.text("[$" + spn.attr("id")

            .replace("OrderUserControl1_lab_", "") + "$]");

        spn.replaceWith(spn.text());

});

    $("*[id]").removeAttr("id");

    $("*").css("display", "");

    var xwin = window.open("about:blank");

    xwin.document.write($("table:first").html());

});

從另外新開的視窗View Source就可以取回HTML Code了。程式中用了is(), [id^=...] Selector, replaceWith(), 10行搞定。

Posted 25 February 2009 07:37 PM 由 Jeffrey | 10 comment(s)

Filed under: jQuery