2011-07-17 28 views
0
Col1 Col2 Col3 Col4 Col5 Col6 
    Row11 Row12 Row13 Row14 Row15 Row16 
    Row21 Row22 Row23 Row24 Row25 Row26 
    Row31 Row32 Row33 Row34 Row35 Row36 

我希望添加的整行或一特定行,列組合(COL4),用於該第一列的值是相等的周圍的邊框。例如,如果Row11等於Row21,那麼圍繞這兩行或圍繞Row14,Row24應該有一個邊框。 非常感謝,如果任何人都可以提供任何相同的建議。添加圍繞特定的行邊界在表

+0

你能否澄清一下「如果Row11等於Row21,那麼這兩行之間應該有一個邊框」? 您的列已命名,但您沒有「行」,您標記的是元素。你想圍繞匹配元素的邊框還是圍繞包含匹配元素的行? – Sinetheta

+0

我需要知道幾件事情來幫助。你如何在Web服務中呈現數據?您是使用JSP在DOM中佈局表格還是使用jQuery通過JSON AJAX服務傳遞它?你有沒有想過你將如何確定比賽?例如,服務器端可以將它作爲查詢的一部分,還是在演示文稿中,或者您希望在客戶端的javascript中執行此操作?如果您不確定,請告訴我們更多關於您目前爲止所擁有的信息,或者您是否正在尋找方法。 – mbarnes

回答

1

不難遍歷每個第一單元行以確定單元格內容是否與下一行中第一個單元格的內容「相等」,因此您可以輕鬆地創建一個函數來返回匹配行的數組,例如

// Return an array of arrays of row indexes 
// whose first cell content is equal 
function getMatchingRows(table) { 
    var rows = table.rows; 
    var allMatches = []; 
    var currentMatches, currentValue, previousValue; 

    for (var i=0, iLen=rows.length; i<iLen; i++) { 
    currentValue = getText(rows[i].cells[0]); 

    if (currentValue == previousValue) { 

     if (!currentMatches) { 
     currentMatches = [i-1, i]; 
     } else { 
     currentMatches.push(i); 
     } 

    } else { 
     previousValue = currentValue; 

     if (currentMatches) { 
     allMatches.push(currentMatches); 
     currentMatches = null; 
     } 
    } 
    } 
    return allMatches; 
} 

// Simple function to return element's text content 
function getText(el) { 
    if (typeof el.textContent == 'string') { 
    return el.textContent; 
    } else if (typeof el.innerText == 'string') { 
    return el.innerText; 
    } 
} 

現在它只是一個應用適當的風格與細胞的事,所以你需要一個hightlighRows功能hightlights基於行索引數組行和hightlightColumnSegment,突出細胞基礎上,相同的行索引數組和單元索引(或者如果要突出顯示相鄰列和行的塊,可能還有多個單元索引)。

getText函數是非常簡單的,但足以舉例。

1

你有一個jsp標籤,我假設你正在渲染這個表的服務器端,你描述的邏輯也是服務器端。我可能會建議增加一個名爲「亮點」什麼類的<td>要突出顯示,然後在你的CSS相應的樣式它,例如:

.highlight 
{ 
    border:1px solid #000; 
}