Comment changer la classe de <td> spécifié?

Question

function change() {
  var tds = document.getElementsByTagName("td");
  var tds2 = tds.className;
  console.log(tds);
  for (var i = 0; i < tds.length; i++) {
    if (tds[i].className === "marked") {
      tds[i].className = "UNmarked";
    } else {
      tds[i].className = "marked";
    }
  }
}

function generTab(rows, cols) {
  var html = "<table id='tb01'>";
  for (var i = 1; i <= rows; i++) {
    html += "<tr>"
    for (var j = 1; j <= cols; j++) {
      html += "<td class='marked' onclick='change()'>" + "</td>";
    }

    html += "</tr>"
  }
  return html + "</table>";
}

td.marked {
  height: 50px;
  width: 50px;
  border: solid thin black;
  cursor: pointer;
  background-color: white;
}

td.UNmarked {
  height: 50px;
  width: 50px;
  border: solid thin black;
  cursor: pointer;
  background-color: purple;
}

<div class="line">
  Number of rows:
  <input type="text" id="rows" />


</div>
<div class="line">
  Number of cols:
  <input type="text" id="cols" />
  <span class="error"></span>
</div>
<input type="button" value="Generuj" id="gener" />
</div>
<div id="scene"></div>

Je génère ma table par moi-même et je veux changer la classe de <td> spécifié en cliquant dessus. Le problème est que lorsque je clique sur <td>, cela modifie toutes les classes, mais je veux changer la classe <td> sur laquelle je clique.

javascript

3

CleverBoi19 15 avril 2018 à 15:42

Answer 1

Peut-être que vous pouvez faire quelque chose comme ce qui suit avec une seule classe:

var tds = document.querySelectorAll("td");
tds.forEach(function(td){
  td.addEventListener('click', function(){
    this.classList.toggle('marked')
  });
});

td {
   border: 1px solid lightgray;
   padding: 10px;
   font-size: 20px;
}
.marked{
  background-color: #4CAF50;
  color: white;
}

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
</table>

1

Mamun 15 avril 2018 à 15:09

Answer 2

Ajoutez des écouteurs d'événements click à tous les éléments td et implémentez une fonction onClick simple qui ajoute / supprime la classe CSS souhaitée.

const tds = Array.from(document.querySelectorAll('td'));

const onClick = ({ target }) => { 
  tds.forEach(td => td === target ? td.classList.add('active') : td.classList.remove('active'))
}

tds.forEach(td => td.addEventListener('click', onClick));

.active {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  
  <table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

0

Tomasz Kula 15 avril 2018 à 12:54

Answer 3

Le code que vous avez écrit devrait basculer la classe de tous les td dans le document. Je crois que vous essayez de changer la classe du td sur lequel vous cliquez. Pour ce faire, essayez quelque chose comme (excuses à l'avance car je suis sur mon téléphone):

function change(e) {
  let td = e.target;
  if (td.classList.contains('marked')) {
    td.className = 'UNmarked';
  } else {
    td.className = 'marked';
  }
}

Et assurez-vous que cette modification est liée en tant qu'événement de clic pour chaque td.

0

wassona 15 avril 2018 à 13:03

Answer 4

Si vous pouvez utiliser jQuery ...

$("td").click(function(){
    $(this).toggleClass("marked")
        .toggleClass("UNmarked");
});

-1

Adil 15 avril 2018 à 12:48

Comment changer la classe de <td> spécifié?

4 réponses

Questions connexes

De nouvelles questions

javascript