Ich möchte HTML-Tabelle auf Doppelklick nur mit jquery Javascript bearbeitet werden

Question

Hallo ich möchte meine tableeditable auf doubleclick haben, wie würde ich das tun.

unten ist, was ich

$(function(){ 
 
    $('.zui-table').find('td').dblclick(function(){ 
 
     
 
    }); 
 
});

.zui-table { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    font: normal 13px Arial, sans-serif; 
 
} 
 

 
.zui-table thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    padding: 10px; 
 
    text-align: left; 
 
    text-shadow: 1px 1px 1px #fff; 
 
} 
 

 
.zui-table tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 10px; 
 
    text-shadow: 1px 1px 1px #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="zui-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Height</th> 
 
     <th>Born</th> 
 
     <th>Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td contenteditable>DeMarcus Cousins</td> 
 
     <td contenteditable>C</td> 
 
     <td contenteditable>6'11"</td> 
 
     <td contenteditable>08-13-1990</td> 
 
     <td contenteditable>$4,917,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

einfach contenteditable als attr auf click hinzufügen versucht haben. Mit dieser Lösung brauchen Sie nicht dblclick zu verwenden, da in erster click Sie attr fügen Sie dann auf den zweiten click können Sie Ihre Inhalte edit.

$('.zui-table').find('td').each(function() { 
 
    $(this).click(function() { 
 
    $('.zui-table td').not($(this)).prop('contenteditable', false); 
 
    $(this).prop('contenteditable', true); 
 
    }); 
 
    $(this).blur(function() { 
 
    $(this).prop('contenteditable', false); 
 
    }); 
 
});

.zui-table { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    font: normal 13px Arial, sans-serif; 
 
} 
 

 
.zui-table thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    padding: 10px; 
 
    text-align: left; 
 
    text-shadow: 1px 1px 1px #fff; 
 
} 
 

 
.zui-table tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 10px; 
 
    text-shadow: 1px 1px 1px #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="zui-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Height</th> 
 
     <th>Born</th> 
 
     <th>Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>DeMarcus Cousins</td> 
 
     <td>C</td> 
 
     <td>6'11"</td> 
 
     <td>08-13-1990</td> 
 
     <td>$4,917,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Edit: auf diese topic Sie javascript Lösung finden, aber hier ist jquery einfache Lösung. Ich habe meine Antwort gelöscht, aber danach dachte ich, dass das vielleicht neben diesem Thema und für die Zukunft nötig wäre.