jQuery - OnClick，點擊時始終更改表格單元格的背景顏色

例如：您有一個表格，它有4個tds和2個trs。桌子的背景顏色是白色的。如果我點擊A td，td應該是紅色，比如果我點擊B，B td應該是紅色，並且td應該也是紅色。如果我點擊C比，C應該是紅色的，B和A也應該是紅色的。jQuery - OnClick，點擊時始終更改表格單元格的背景顏色

我有這樣的事情。但它不好，因爲當我再次點擊時，我想將顏色改回白色。

http://jsfiddle.net/k8UgT/193/

代碼中，我使用

<table> 
    <tr> 
     <td onclick="function()">AAA</td> 
     <td onclick="function()">BBB</td> 
     <td onclick="function()">CCC</td> 
    </tr> 
     <tr> 
     <td onclick="function()">DDD</td> 
     <td onclick="function()">EEE</td> 
     <td onclick="function()">FFF</td> 
    </tr> 
</table>

JS：

$(function() { 
    $('td').click(function() { 
    $(this).css('background', '#aaa') 
    }); 
});

來源

2013-10-27 Karol

你想要[This]（http://jsfiddle.net/cse_tushar/k8UgT/194/）或[This]（http://jsfiddle.net/cse_tushar/k8UgT/196/） –

如果你使用jQuery你不需要在 – falnyr

歡迎SO。

首先你不需要在td上有onclick屬性。其次，我建議使用CSS類而不是設置背景顏色。

CSS

.red-cell { 
    background: #F00; /* Or some other color */ 
}

$(function() { 
    $('td').click(function() { 
    $(this).toggleClass("red-cell"); 
    }); 
});

瞭解更多關於toggleClass here。更新fiddle

來源

2013-10-27 12:49:23

上定義onclick函數，謝謝;）非常多 – Karol

不客氣，祝你好運。 –

有無論如何告訴頁面是否已經添加了「紅細胞」，如果是的話，在將「紅細胞」添加到您點擊的下一個細胞之前，它是否會被刪除？有點像這樣只有一個細胞可以一次變紅？ –

試試這個：

$(function() { 
    $('td').click(function() { 
     if($(this).attr('style')) 
    $(this).removeAttr('style'); 
     else 
    $(this).css('background', '#aaa') 
    }); 
});

來源

2013-10-27 12:47:44

使用CSS類作爲紅色背景，然後在您的JavaScript中使用.toggleClass()。

的JavaScript

$('td').click(function() { 
    $(this).toggleClass('on'); 
});

CSS

td.on { 
    background-color: red; 
}

Updated Fiddle

來源

2013-10-27 12:49:37 techfoobar

試試這個

$(function() { 
    $('td').toggle(function() { 
    $(this).css('background', 'red'); 
    },function(){ 
    $(this).css('background', 'white'); 
    }); 
});

這裏是小提琴http://jsfiddle.net/k8UgT/199/

來源

2013-10-27 12:50:32

jQuery - OnClick，點擊時始終更改表格單元格的背景顏色

回答

相關問題