2009-04-28 70 views
3

有點背景: 我有一個表格和一些複選框的頁面。該頁面在asp.net中生成。 每一行都有一個複選框,標題中有一個複選框,並且在某些單元格中會有一組複選框(您會看到很多複選框)。接通javascript事件並傳遞參數

這些複選框中的每一個都可以在onclick事件中使用一點點javascript魔術效果。

讓你有這樣的:

<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td> 

沒有太大的驚喜有那麼。

好吧,所以這裏的問題: 所以這工作正常,但我需要每個複選框來反映其他複選框的狀態。例如:標題中的複選框會更改行復選框的值,對行復選框的更改可以更改標題複選框等。

我知道您在想什麼:輕鬆調用Javascript函數highlightRow。 但是,如果我做了我怎麼會得到的參數(ok了this是容易的,但我在地球上哪裏可以拿到'AlternateRowStyle1'?)

所以我想的問題是:我應該把這些參數,所以我可以用一個漂亮的跨瀏覽器方式用JS獲取他們。 (<PossibleRedHerring>嘗試在每個複選框上放置自定義屬性,但不確定這是否是正確的方式)),如果完全可以避免,我還是不需要保持調用回服務器。


(順便說一句對不起,如果這是錯誤格式/位寫的,我非常累!)


更新: 好了,所以最後我設法躲避定製屬性注意到複選框有層次結構。這意味着我能夠觸發子複選框的click事件(inturn會將其稱爲childrens的點擊事件等),在這種情況下,流程永遠不會朝相反的方向進行,從而導致無限循環(有很多評論/文檔指出這一點!)

唯一有趣的事情是這與IE和Firefox,Chrome和Safari瀏覽器中的點擊事件之間的區別。 IE允許任何東西點擊,因爲其他人限制點擊按鈕,複選框,收音機,重置或提交的INPUT元素。我有點想用事件冒泡來將點擊事件附加到包含一組複選框的元素。

最終去與一個黑客位的:

// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit 
// https://developer.mozilla.org/en/DOM/element.click 
// this function allows both browers to support click on all elements 
function FireClickEvent(element) 
{ 
    if (element.click) 
    { 
     element.click(); 
    } 
    else 
    { 
     // We don't have a click on this element, so add our own. 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     element.dispatchEvent(evt); 
    } 
} 

認爲這可能是有所改善,但它的業務了。

還應該承認這是我第一次使用正確的javascript。這有點嚇人的語言(尤其是當碰到dom的時候),但有趣的是,我期待着花一點時間進一步鑽研。

回答

0

你可以很容易地通過使用jQuery來做到這一點。您可以根據複選框的位置在複選框上定義一些自定義屬性,並在點擊後獲取屬性值並按照您想要的方式操作行的CSS,複選框。

這就是如何使用jQuery的

$("table tr:nth-child(even)").addClass("striped"); 

<style> 
.striped{ 
background-color:#efefef; 
} 
</style> 
0

我認爲自定義屬性確實是您的解決方案,不能看到任何問題。雖然我會將類似備用行樣式的行作爲行的屬性,而不是作爲複選框的屬性。

+0

你打我一分鐘:-) – Vikram 2009-04-28 17:12:03

0

爲表定義備用行顏色如果我理解正確;你想能夠在標題上點擊並且同一​​行中的所有複選框都將被檢查?

我會爲「th」元素設置一個cssclass,並在每個「td」元素上使用相同的類。

我會在每個第二個「tr」元素上放置交替類。這樣,如果它是一個交替的項目,你可以有不同的風格。

我也會用jQuery來輕鬆創建js代碼。

我不會添加自定義屬性,因爲...你不能只添加自己的虛構屬性,這就是爲什麼我們有html標準。

+0

事實上,沒有人關心無關的屬性,但一個HTML驗證程序。用戶代理必須忽略它不知道或不理解的屬性,所以使用它們沒有真正的危險,是嗎? – Tomalak 2009-04-28 17:19:08