一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法
【專利摘要】本發(fā)明提出了一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，所述方法包括以下步驟：a.通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)；b.獲取目標(biāo)單元格所在行的值R和列的值C、rowspan屬性值M和colspan屬性值N；c.高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色；d.目標(biāo)單元格行值或列值變化時(shí)，高亮顯示的行或列隨之變化，原高亮顯示的行或列恢復(fù)原顯示顏色。本發(fā)明實(shí)現(xiàn)了網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示，用戶不需要把Table轉(zhuǎn)換成Excel或WPS表格即可實(shí)現(xiàn)在網(wǎng)頁(yè)中選中一個(gè)或幾個(gè)單元格時(shí)高亮顯示該單元格所在的行和列，同時(shí)區(qū)別和突出顯示選中的單元格；解決了用戶面對(duì)大量單元格時(shí)查看目標(biāo)單元格行信息和列信息不便的技術(shù)問題。
【專利說明】—種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及表格應(yīng)用【技術(shù)領(lǐng)域】，特別涉及一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法。
【背景技術(shù)】
[0002]目前的辦公軟件在電子表格應(yīng)用方面正越來越向增強(qiáng)用戶體驗(yàn)的方向發(fā)展，例如Excel中，用戶選中電子表格的某個(gè)單元格時(shí)，該單元格會(huì)以加粗加黑邊框的效果顯示；當(dāng)用戶選中多個(gè)單元格時(shí)，選中的單元格會(huì)以區(qū)別于其他單元格背景色的方式顯示。該方法實(shí)現(xiàn)了選中單元格突出顯示的效果。WPS表格中，在普通模式下，功能和Excel類似；在閱讀模式的狀態(tài)下，用戶選中某個(gè)單元格時(shí)，該單元格會(huì)以加粗加黑邊框的效果顯示，且該單元格所在的行和列以某種顏色高亮顯示，該方法不僅突出顯示單元格而且可以很方便地看到單元格的所在行列的信息。
[0003]網(wǎng)頁(yè)中使用表格已是一種很普遍的現(xiàn)象，但是網(wǎng)頁(yè)中表格的單元格要么不能突出顯示；要么是在編輯時(shí)已經(jīng)定好如何顯示背景色和前景色，是靜態(tài)的，不能靈活變化。如果在閱讀的過程中能突出顯示網(wǎng)頁(yè)中的單元格，那么用戶體驗(yàn)將進(jìn)一步增強(qiáng)。按照現(xiàn)有的技術(shù)，若要實(shí)現(xiàn)突出顯示網(wǎng)頁(yè)表格單元格的效果，需要把網(wǎng)頁(yè)中的電子表格先轉(zhuǎn)換成Excel表格或WPS表格，然后使用Excel和WPS表格的功能突出顯示。顯然，這種實(shí)現(xiàn)方式比較繁瑣和費(fèi)時(shí)，不能一步到位。

【發(fā)明內(nèi)容】

[0004]針對(duì)以上問題，本發(fā)明提出了一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，通過事先定義TD節(jié)點(diǎn)的列屬性，瀏覽含有Table標(biāo)簽的網(wǎng)頁(yè)，獲取目標(biāo)單元格所在的行列值以及是否是合并單元格，高亮顯示目標(biāo)單元格所在的行和列。
[0005]為實(shí)現(xiàn)上述
【發(fā)明內(nèi)容】
，本發(fā)明采用了一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，該方法的技術(shù)方案如下:
[0006]a.通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)；
[0007]b.獲取目標(biāo)單元格所在行的值R和列的值C、rowspan屬性值M和colspan屬性值N，若沒有M或N的值則默認(rèn)值為I ;
[0008]c.高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色；當(dāng)M = 1，N = I，高亮顯示的區(qū)域?yàn)榈赗行和第C列，且目標(biāo)單元格區(qū)別顯示；當(dāng)M> LN= 1，目標(biāo)單元格為行合并單元格，高亮顯示的區(qū)域?yàn)榈赗至R+M-1行和第C列，且目標(biāo)單元格區(qū)別顯示；iM= 1，N> 1，目標(biāo)單元格為列合并單元格，高亮顯示的區(qū)域?yàn)榈赗行和第N至N+C-1列，且目標(biāo)單元格區(qū)別顯示；當(dāng)11> 1，N> 1，目標(biāo)單元格為M*N區(qū)域合并單元格，高亮顯示的區(qū)域?yàn)榈赗至R+M-1行和第N至N+C-1列，且目標(biāo)單元格區(qū)別顯示；
[0009]d.目標(biāo)單元格行值或列值變化時(shí)，高亮顯示的行或列隨之變化，原高亮顯示的行或列恢復(fù)原顯示顏色。
[0010]所述步驟b獲取目標(biāo)單元格所在行的值R和列的值C，對(duì)于獲得列值C的方法:事先在TD節(jié)點(diǎn)中增加自定義列屬性，在Table初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在該自定義屬性中，通過該自定義屬性匹配的列獲得相應(yīng)列的TD節(jié)點(diǎn)；或者，在瀏覽器內(nèi)核的解析器中增加對(duì)Table中TD節(jié)點(diǎn)的列屬性的解析功能，在表格初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在列屬性中，通過該屬性匹配的列獲得相應(yīng)列的TD節(jié)點(diǎn)，瀏覽器內(nèi)核解析目標(biāo)單元格的列值。
[0011]所述目標(biāo)單元格邊框通過加粗加黑或使用其他色差大的顏色突出顯示。
[0012]目標(biāo)單元格區(qū)域?yàn)橐粋€(gè)或多個(gè)。
[0013]與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)現(xiàn)了網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示，通過獲取單元格的行列值及合并信息，用戶不需要把Table轉(zhuǎn)換成Excel或WPS表格即可實(shí)現(xiàn)在網(wǎng)頁(yè)中選中一個(gè)或幾個(gè)單元格時(shí)高亮顯示該單元格所在的行和列，同時(shí)區(qū)別和突出顯示選中的單元格；解決了用戶面對(duì)大量單元格時(shí)查看目標(biāo)單元格行信息和列信息的不便。
【專利附圖】

【附圖說明】
[0014]圖1為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的流程圖；
[0015]圖2為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施例一；
[0016]圖3為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施例二 ；
[0017]圖4a為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖一；
[0018]圖4b為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖二；
[0019]圖4c為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖三；
[0020]圖4d為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖四；
[0021]圖4e為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖五。
【具體實(shí)施方式】
[0022]為了使本發(fā)明所提到的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法及其優(yōu)點(diǎn)更加清楚明確，以下參照附圖對(duì)本發(fā)明進(jìn)行更進(jìn)一步的詳細(xì)說明。
[0023]圖1為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的流程圖，該流程圖顯示了本發(fā)明的主要實(shí)現(xiàn)步驟，其內(nèi)容如下:
[0024]步驟101，通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)；
[0025]步驟102，獲取目標(biāo)單元格所在行的值R和所在列的值C、rowspan屬性值M和colspan屬性值N ；
[0026]步驟103，高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色；
[0027]步驟104，目標(biāo)單元格行值或列值變化時(shí)，高亮顯示的行或列隨之變化，原高亮顯示的行或列恢復(fù)原顯示顏色。
[0028]圖2為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施例，該實(shí)施例有以下步驟:
[0029]步驟201，事先在TD節(jié)點(diǎn)中增加自定義列屬性，在Table初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在該自定義屬性中。
[0030]現(xiàn)有的HTML語(yǔ)言沒有記錄單元格列的功能函數(shù)，為實(shí)現(xiàn)本發(fā)明中獲取單元格的行值和列值的功能，需事先在TD節(jié)點(diǎn)中增加自定義列屬性，對(duì)于合并單元格，該屬性有以下特點(diǎn):
[0031]當(dāng)表格中新增rowspan或colspan屬性或原有rowspan或colspan屬性值增加時(shí)，刪除被rowspan或colspan的TD節(jié)點(diǎn)占位的TD節(jié)點(diǎn)；當(dāng)表格中減小rowspan或colspan屬性值時(shí)，新增TD節(jié)點(diǎn)填補(bǔ)曾被rowspan或colspan的TD節(jié)點(diǎn)占位。新增TD節(jié)點(diǎn)時(shí),根據(jù)rowspan或colspan屬性的變化值及所屬TD節(jié)點(diǎn)的列屬性為新增TD節(jié)點(diǎn)設(shè)置相應(yīng)的自定義列屬性。
[0032]步驟202，通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)。
[0033]用戶在瀏覽網(wǎng)頁(yè)時(shí)遇到對(duì)其有使用或參考價(jià)值的表格，通過點(diǎn)擊鼠標(biāo)、敲擊鍵盤、觸摸屏幕等方式確定目標(biāo)單元格。
[0034]步驟203，獲取目標(biāo)單元格所在行的值R和所在列的值C、rowspan屬性值M和colspan屬性值N。
[0035]通過解析Table標(biāo)簽下的內(nèi)容，獲取目標(biāo)單元格在表格中的位置，處于第幾行第幾列；以及目標(biāo)單元格是否有合并，若是沒有rowspan屬性值和colspan屬性值，則默認(rèn)M和N的值等于I ;若是rowspan屬性值和colspan屬性值存在,則按照實(shí)際值獲取。
[0036]步驟204，高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色。
[0037]根據(jù)步驟203獲得的信息，高亮顯示目標(biāo)單元格所在的行和列，為了突出顯示目標(biāo)單元格，其所在區(qū)域顯示區(qū)別于高亮顯示顏色的其他顏色；為進(jìn)一步增強(qiáng)用戶的視覺體驗(yàn)，對(duì)于目標(biāo)單元格的邊框，使用加粗加黑或者其他顏色突出顯示。
[0038]步驟205,目標(biāo)單元格位置是否變化。
[0039]在同一個(gè)表格中，若目標(biāo)單兀格從一個(gè)轉(zhuǎn)換到另一個(gè)時(shí)，目標(biāo)單兀格位置發(fā)生變化，其所在行數(shù)或列數(shù)會(huì)發(fā)生變化或者行數(shù)和列數(shù)同時(shí)發(fā)生變化，重新執(zhí)行步驟203，高亮顯示的區(qū)域隨著目標(biāo)單元格的變化而變化顯示，被移出的原高亮顯示區(qū)域恢復(fù)原顯示顏色。
[0040]若目標(biāo)單元格是多個(gè)，則同時(shí)高亮顯示每個(gè)單元格所在的行和列，對(duì)于重疊的區(qū)域，按單個(gè)的情況處理。
[0041]步驟206，結(jié)束。
[0042]在某表格中，若目標(biāo)單元格位置不再發(fā)生變化，而是直接轉(zhuǎn)移至下一個(gè)表或網(wǎng)頁(yè)，則執(zhí)行步驟206，在該表格中的高亮顯示操作結(jié)束。
[0043]圖3為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施例二，該實(shí)施例有以下步驟:
[0044]步驟301，事先在瀏覽器內(nèi)核的解析器中增加對(duì)Table中TD節(jié)點(diǎn)的列屬性的解析功能，在Table初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在列屬性中。
[0045]步驟302，通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)。
[0046]步驟303，瀏覽器內(nèi)核解析獲取目標(biāo)單元格所在行的值R和所在列的值Cjowspan屬性值M和colspan屬性值N。
[0047]步驟304，高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色。
[0048]步驟305，判斷目標(biāo)單元格位置是否變化。
[0049]步驟306，結(jié)束。
[0050]該實(shí)施例的步驟和實(shí)施例一的不同在于步驟301，在瀏覽器內(nèi)核的解析器中增加對(duì)表格中TD節(jié)點(diǎn)的列屬性的解析功能。
[0051]現(xiàn)有的HTML語(yǔ)言沒有記錄單元格列的功能函數(shù)，為實(shí)現(xiàn)本發(fā)明中獲取單元格的行值和列值的功能，也可在瀏覽器內(nèi)核的解析器中增加對(duì)表格中TD節(jié)點(diǎn)的列屬性的解析功能。在表格初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在列屬性中，通過該屬性匹配的列獲得相應(yīng)列的TD節(jié)點(diǎn)。
[0052]圖4a為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖一，其實(shí)現(xiàn)過程為:通過解析Table標(biāo)簽下的內(nèi)容可知目標(biāo)單元格A位于第三行第二列，且M= 1，N= 1，則高亮顯示的區(qū)域?yàn)榈谌泻偷诙?，同時(shí)目標(biāo)單元格A以原頁(yè)面顏色顯示且邊框加粗加黑；
[0053]圖4b為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖二，其實(shí)現(xiàn)過程為:目標(biāo)單元格由A轉(zhuǎn)換成B，通過解析Table標(biāo)簽下的內(nèi)容可知目標(biāo)單元格B位于第三行第三列，且M = LN = 2，則高亮顯示的區(qū)域是變成第三行和第三列、第四列，同時(shí)目標(biāo)單元格B以原頁(yè)面顏色顯示且邊框加粗加黑。第三行因仍在高亮顯示區(qū)域，故其顏色是高亮顯示的顏色；
[0054]圖4c為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖三，其實(shí)現(xiàn)過程為:通過解析Table標(biāo)簽下的內(nèi)容可知目標(biāo)單元格C位于第三行第二列，且M= 2，N= 1，則高亮顯示的區(qū)域是第三行、第四行和第二列，同時(shí)目標(biāo)單元格C以原頁(yè)面顏色顯示且邊框加粗加黑；
[0055]圖4d為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖四，其實(shí)現(xiàn)過程為:通過解析Table標(biāo)簽下的內(nèi)容可知目標(biāo)單元格D位于第三行第二列，且M= 2，N= 2，則高亮顯示的區(qū)域是第三行、第四行和第二列、第三列，同時(shí)目標(biāo)單元格以原頁(yè)面顏色顯示且邊框加粗加黑；
[0056]圖4e為本發(fā)明所提供的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法的實(shí)施效果圖五，通過解析Table標(biāo)簽下的內(nèi)容可知目標(biāo)單元格E、F分別位于第三行第二列和第五行第三列，目標(biāo)單元格都不存在合并的情況，因此高亮顯示的區(qū)域是第三行第二列和第五行第三列，同時(shí)目標(biāo)單元格E、F以原頁(yè)面顏色顯示且邊框加粗加黑。[0057]以上所述是對(duì)本發(fā)明的較佳的【具體實(shí)施方式】，本【技術(shù)領(lǐng)域】人員應(yīng)當(dāng)理解，所述實(shí)施方式并非限定本發(fā)明的保護(hù)范圍。在不脫離本發(fā)明的精神實(shí)質(zhì)和原則下，在細(xì)節(jié)方面可以進(jìn)行變化或者修改，均應(yīng)涵蓋在本發(fā)明的權(quán)利要求范圍之內(nèi)。
【權(quán)利要求】
1.一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，其特征在于，所述方法包括以下步驟: a.通過瀏覽器瀏覽包含有Table標(biāo)簽的網(wǎng)頁(yè)； b.獲取目標(biāo)單元格所在行的值R和列的值C、rowspan屬性值M和colspan屬性值N，若沒有M或N的值則默認(rèn)值為I ; c.高亮顯示目標(biāo)單元格所在的行和列，且目標(biāo)單元格顯示為區(qū)別于高亮顯示顏色的其他顏色；當(dāng)M= 1，N= 1，高亮顯示的區(qū)域?yàn)榈赗行和第C列，且目標(biāo)單元格區(qū)別顯示；當(dāng)皿> 1，N= 1，目標(biāo)單元格為行合并單元格，高亮顯示的區(qū)域?yàn)榈赗至R+M-1行和第C列，且目標(biāo)單元格區(qū)別顯示；iM= 1，N> 1，目標(biāo)單元格為列合并單元格，高亮顯示的區(qū)域?yàn)榈赗行和第N至N+C-1列，且目標(biāo)單元格區(qū)別顯示；當(dāng)M > I, N > I,目標(biāo)單元格為M*N區(qū)域合并單元格，高亮顯示的區(qū)域?yàn)榈赗至R+M-1行和第N至N+C-1列，且目標(biāo)單元格區(qū)別顯示； d.目標(biāo)單元格行值或列值變化時(shí)，高亮顯示的行或列隨之變化，原高亮顯示的行或列恢復(fù)原顯示顏色。
2.如權(quán)利要求1所述的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，其特征在于，所述步驟b獲取目標(biāo)單元格所在行的值R和列的值C，對(duì)于獲得列值C的方法:事先在TD節(jié)點(diǎn)中增加自定義列屬性，在Table初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在該自定義屬性中，通過該自定義屬性匹配的列獲得相應(yīng)列的TD節(jié)點(diǎn)；或者，在瀏覽器內(nèi)核的解析器中增加對(duì)Table中TD節(jié)點(diǎn)的列屬性的解析功能，在表格初始化時(shí)將每個(gè)TD節(jié)點(diǎn)所在的列的序列值保存在列屬性中，通過該屬性匹配的列獲得相應(yīng)列的TD節(jié)點(diǎn)，瀏覽器內(nèi)核解析目標(biāo)單元格的列值。
3.如權(quán)利要求1所述的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，其特征在于，所述目標(biāo)單元格邊框通過加粗加黑或使用其他色差大的顏色突出顯示。
4.如權(quán)利要求1或2所述的一種網(wǎng)頁(yè)Table中目標(biāo)單元格的行列高亮顯示方法，其特征在于，目標(biāo)單元格區(qū)域?yàn)橐粋€(gè)或多個(gè)。
【文檔編號(hào)】G06F17/30GK103970735SQ201310027184
【公開日】2014年8月6日 申請(qǐng)日期:2013年1月25日 優(yōu)先權(quán)日:2013年1月25日
【發(fā)明者】牟春林 申請(qǐng)人:蘇州精易會(huì)信息技術(shù)有限公司