Wednesday, February 25, 2009 - 文章

CODE-用jQuery翻修HTML內容

處理一個案子,同事給了我一個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行搞定。

搜尋

Go

<February 2009>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
1234567
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication