Comment changer la couleur d'arrière-plan d'un TD en cliquant avec JavaScript / jQuery?

J'ai un <td style="background-color:white"></td>.

Je veux faire en sorte que lorsque je clique sur l'intérieur que tden arrière-plan, les changements de couleur noire. Comment puis-je réaliser cela avec jQuery? Est-il d'événement onmousedown ou cliquez sur l'événement?

Avec JavaScript normale j'ai essayé:

<td style="background-color:white" onclick="$(this).onmousedown('background-color','black')">SomeText</td>

...mais il ne fonctionne pas...

source d'informationauteur Teivere

  1. 25

    ...

    jQuery

    $('td').click(function() {
   $(this).css('backgroundColor', '#000');
});

    ...ou......

    $('table').on('click', 'td', function() {
   $(this).css('backgroundColor', '#000');
});

    JavaScript

    [].forEach.call(document.getElementsByTagName('td'), function(item) { 
   item.addEventListener('click', function() {
       item.style.backgroundColor = '#000';
   }, false); 
});

    ...ou...

    var table = document.getElementsByTagName('table')[0];

var changeStyle = function(e) {
    if (e.target.tagName == 'td') {
        e.target.style.backgroundColor = '#000';
    }
};

table.addEventListener('click', changeStyle, false);

    Les derniers exemples ne lie un gestionnaire d'événement.

    Il peut être préférable d'ajouter une classe, vous pouvez spécifier vos styles dans une feuille de style et pas de couple de votre présentation et de comportement de la couche.

    jQuery

    $('td').click(function() {
   $(this).addClass('active');
 );

    ...ou......

    $('table').on('click', 'td', function() {
   $(this).addClass('active');
});

    CSS

    td.active {
  background: #000;
}

    La raison pour laquelle cela ne fonctionne pas...

    <td style="background-color:white"
     onclick="$(this).onmousedown('background-color','black')">
     SomeText
</td>

    ...car il n'y a pas de onmousedown() événement sur un objet jQuery (bien qu'il soit mousedown()).

  2. 3

    La fonction correcte est mousedown. Mais vous pouvez simplement utiliser un cliquez sur.

    <table> ... </table>

<script>
    $("table tr td").click(function() {
        $(this).css("background", "#fff");
    });
</script>

    Voir cet exemple sur jsFiddle

    Il est recommandé que votre script n'est pas mélangé avec de l'HTML, mais c'est valable:

    <table>
    <tr>
        <td onclick="$(this).css('background', '#fff')">change color</td>
    </tr>
</table>

    Voir cet exemple sur jsFiddle

    Votre événement onclick était essayer (syntaxe incorrecte) pour lier un événement sur lui-même et il n'était pas de changer l'élément de style.

    Cet exemple montre pourquoi le même script sur la tête ne fonctionne pas.

    .bind ou .click vont se lier à des éléments existants, live va se lier sur n'importe quel élément, même s'il est inséré à la suite.

    jQuery références

  3. 3

    Je pense que jquery peut-être exagéré ici. Vous pouvez utiliser quelque chose comme cela.

    <table>
    <tr>
        <td onclick="javascript:this.style.background = '#000000';">this</td>
    </tr>
</table>

    Vous pouvez jouer avec lui ici - http://jsfiddle.net/yVvyg/

    Cela peut aussi bedone de la balise head 

    loadtheclicks() {
var ar = document.querySelectorAll("td"); //could also use getElementByTagname
        for (var i=0; i< ar.length; i++) {
            ar[i].addEventListener("click", function() { this.style.background = '#000000'; }, false);
        }
}

    Appelez simplement que onload et vous devriez être en or. Je l'ai que sur jsfiddle ainsi - http://jsfiddle.net/2anSz/4/