獲取表格中行的背景以更改點擊次數？

如何獲取表格中的行的背景以在用戶執行正確的點擊時更改顏色？獲取表格中行的背景以更改點擊次數？

我試過這個：active pseudoclass，但不工作，因爲我想要的。例如，在移動設備的觸摸屏上，只要用戶觸摸屏幕，相交的行就會改變顏色，即使它不是點擊[點擊是一個簡短的mouseDown + mouseUp組合]。

這裏的表：

<table> 
    <tbody> 
    <tr> 
     <td align="left" style="vertical-align: top;"> 
     <div class="GPBYFDEEB" 
      __gwtcellbasedwidgetimpldispatchingfocus="true" 
      __gwtcellbasedwidgetimpldispatchingblur="true"> 
      <div> 
      <div class="GPBYFDEAB" tabindex="0" style="outline:none;" __idx="0" onclick=""> 
       <div class="GPBYFDECB" style="outline:none;" __idx="1" onclick=""> 
       <!-- finally this is me. --> 
       <div class="tableRow">

，這裏是我的CSS：

.tableRow { 
    background-color: green; 
} 

.tableRow:active { 
    background-color: red; 
}

有沒有辦法做到這一點？（我使用gwt生成上面的html，但不認爲這很重要）。

準確地說，我想要什麼是該行的背景顏色在命中onclick事件後變爲紅色。經過短暫的時間後，將背景恢復爲原來的顏色。我基本上試圖重現單擊iOS或Android本機窗口小部件上的列表項的視覺效果。謝謝

來源

2012-09-08 user291701

'：active'只適用於鏈接（''）。您可能需要涉及一些Javascript單擊事件，例如['jQuery.click（）']（http://api.jquery.com/click/）。 –

如果您使用GWT，爲什麼不使用GWT更改行顏色？ –

我很想用gwt來改變顏色，但是怎麼樣？ – user291701

這就是你如何在GWT中完成它：將一個處理程序附加到CellTable或DataGrid。

myTable.addCellPreviewHandler(new Handler<myObject>() { 

    @Override 
    public void onCellPreview(CellPreviewEvent<myObject> event) { 
     if ("click".equals(event.getNativeEvent().getType())) { 
      myTable.getRowElement(event.getIndex()).getStyle().setBackgroundColor("red"); 
     } 
    }); 
}

如果你不喜歡它看起來（背景顏色是從邊框的顏色不同）的方式，你可以使用它代替：

myTable.getRowElement(event.getIndex()).addClassName("redRow");

這樣你就可以在你的Redrow的指定多個規則CSS類，如：

.redRow { 
    background: red; 
    border: 2px solid red; 
}

當你不需要這個顏色你行，你只是刪除此類或使用.getStyle（）clearBackgroundColor（），如果你喜歡前一種方案。

來源

2012-09-09 18:13:36

的JavaScript使得它非常直截了當：

var rows = document.getElementsByClassName("tableRow"); //get the rows 
var n = rows.length; //get no. of rows 
for(var i = 0; i < n; i ++) { 
    var cur = rows[i]; //get the current row; 
    cur.onmousedown = function() { //when this row is clicked 
     this.style.backgroundColor = "red"; //make its background red 
    }; 
    cur.onmouseup = function() { 
     this.style.backgroundColor = "green"; 
    } 
}

如果您有jQuery的包括在內，這是更簡單：

$(".tableRow").mousedown(function() { 
    $(this).css("background-color", "red"); 
}); 

$(".tableRow").mouseup(function() { 
    $(this).css("background-color", "green"); 
});

使用純JavaScript版本有點演示：little link 。（我冒昧地改變了一下顏色！）。

來源

2012-09-08 17:03:12 Chris

嗨，謝謝你的回答，我的問題並不精確 - 點擊完成後，我想將顏色恢復到原始狀態。我想我必須在onclick處理程序中做一些事情，比如在onclick處理程序中調用setTimeout，並在提供的函數中重新設置顏色。 – user291701

@ user291701您必須使用'onmousedown'和'onmouseup'事件處理程序，使用更新後的演示來檢查更新後的答案。 – Chris

嗨Abody97，幾乎可以工作，問題出現在iphone和android等設備上 - 由於此表是可滾動的，因此當用戶觸摸表格滾動時，行的背景顏色會發生變化。這就是爲什麼我認爲我可能需要執行尷尬的超時方法，以便在真正的onclick事件被註冊後才進行顏色更改。 – user291701

點擊改變樣式確實是需要JavaScript的東西，這並不是很困難，因爲@Abody97已經在他的答案中證明了這一點。

我認爲值得一提的是:active僞選擇器代表什麼，因爲您似乎很困惑。 Personnaly我認爲它的名字是傾向選擇的，如果它被稱爲down或者其他東西，它會更清晰。因爲這正是它的原因。它針對按鈕或鏈接的停止狀態。

每個鏈接或按鈕有3種狀態：
- 默認：不需要僞選擇。你可以稱之爲「向上」狀態。
- 懸停：針對:hover僞選擇器。只有在使用鼠標時纔有用，當鼠標移到元素上時觸發（對於現代瀏覽器，這是任何元素，而不僅僅是鏈接或按鈕）
- 活動：這是我之前提到的停機狀態。它的目標是:active僞選擇器。當使用鼠標時，並不是真的有用，只要鼠標按鈕被按下，它就會被觸發。在toutchscreen上它更加有用，因爲它表示用戶正確點擊。

我不確定你的表格內容會是什麼（你的html代碼片段變得有趣時會停止），但我認爲值得一提的是:focus僞選擇器。當一個元素'有焦點'時，這個會被觸發。它僅適用於輸入元素（input，textarea）或鏈接（通常只在用鍵盤導航時纔有用）。我相信這是你在哪裏嘗試使用:active之後的地方。

我在這裏設置了一個小例子:focus：http://jsfiddle.net/6tN6B/ 特別是最後一個樣本可能對你有用。使用js可以更輕鬆地完成任務，但是我非常喜歡只有在絕對必要時才使用js，所以非js用戶可以在您的網站上獲得相同的體驗。

來源

2012-09-08 18:09:41 Pevara

獲取表格中行的背景以更改點擊次數？

回答

相關問題