Tabelle wird ausgewählt, wenn contentEditable verwendet wird

Question

Ich versuche, td-Elemente mit contentEditable editierbar zu machen. Dies scheint zu funktionieren, aber aus irgendeinem Grund werden sowohl die Tabelle als auch die 'Zelle' ausgewählt.

Ich weiß nicht, wie Sie dieses Verhalten verhindern können. Das habe ich bis jetzt bekommen.

\t document.querySelector('body').addEventListener('click', function(event) { 
 
\t \t if (event.target.tagName.toLowerCase() === 'td') { 
 
\t \t \t this.contentEditable = true; 
 
\t \t \t this.focus(); 
 
\t \t } 
 
\t }); 
 
\t 
 
\t document.querySelector('body').addEventListener('blur', function(event) { 
 
\t \t if (event.target.tagName.toLowerCase() === 'td') { 
 
\t \t \t this.removeAttribute("contentEditable"); 
 
\t \t } 
 
\t });

td[contentEditable] { 
 
    background:black; 
 
    color:white; 
 
}

<table class="table" id="tableCompleted"> 
 
    <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>A</th> 
 
      <th>B</th> 
 
      <th>C</th> 
 
      <th>D</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>John</td> 
 
      <td>Yes</td> 
 
      <td>Yes</td> 
 
      <td>No</td> 
 
      <td>No</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Jesse</td> 
 
      <td>Yes</td> 
 
      <td>Yes</td> 
 
      <td>Yes</td> 
 
      <td>Yes</td> 
 
     </tr> 
 
     <tr> 
 
      <td>David</td> 
 
      <td>No</td> 
 
      <td>Yes</td> 
 
      <td>No</td> 
 
      <td>No</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 1

Es gibt drei kleinere Änderungen an Ihrem Code:

1. CSS td[contentEditable] sogar zu einem td gilt, wenn contentEditable auf false gesetzt ist. Es sollte also td[contentEditable=true] sein, um sicherzustellen, dass die Stile nicht angewendet werden, wenn das Attribut contentEditable auf false gesetzt ist.

2. In der click Handler, statt this.contentEditable, verwende ich event.target.

3. Anstatt Blur-Event auf dem Körper zu hören, abonniere ich das aktive Element td, um das Blur-Ereignis zu beobachten.

   * Hinweis: Ich habe den Code für nicht hinzugefügt, nachdem das Blur-Ereignis behandelt wurde, aber Sie sollten das tun.

function handleBlur(event) { 
 
    event.target.contentEditable = false; 
 
} 
 

 
document.querySelector('body').addEventListener('click', function(event) { 
 
    if (event.target.tagName.toLowerCase() === 'td') { 
 
    event.target.contentEditable = true; 
 
    event.target.focus(); 
 

 
    event.target.addEventListener("blur", handleBlur); 
 
    } 
 
});

td[contentEditable=true] { 
 
    background: black; 
 
    color: white; 
 
} 
 

 
td { 
 
    background: white; 
 
    color: black; 
 
}

<table class="table" id="tableCompleted"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
     <td>No</td> 
 
     <td>No</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jesse</td> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
     <td>Yes</td> 
 
    </tr> 
 
    <tr> 
 
     <td>David</td> 
 
     <td>No</td> 
 
     <td>Yes</td> 
 
     <td>No</td> 
 
     <td>No</td> 
 
    </tr> 
 
    </tbody> 
 
</table>