Сделать ячейку таблицы редактируемой с помощью кнопки

Question

Может ли кто-нибудь помочь мне с этим. Я пытаюсь создать ячейку таблицы (td), которую можно редактировать с помощью кнопки. Я не знаю jQuery.

Я пытаюсь это один:

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#menu1"></a></li> 
    <li><a data-toggle="tab" href="#menu2"></a></li> 
    <button href="#" class="btn btn-default btn-sm" role="button" id="btninfo"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button> 
    </ul> 

     <table border="0" style="width: 100%; font-size:13px; margin-left: 30px"> 
     <tbody> 
     <tr> 
      <th style="width:30%">Birthday:</th> 
      <td style="width:100%" contenteditable="false"><label></label></td> 
     </tr> 
     <tr> 
      <th >Middle Name:</th> 
      <td contenteditable="false"><label></label></td> 
     </tr> 
     <tr> 
      <th>Course:</th> 
      <td contenteditable="false"><label></label></td> 
     </tr> 
     <tr> 
      <th>Status:</th> 
      <td contenteditable="false"><label></label></td> 

     </tr> 
    </tbody> 
    </table> 

Answer 1

Вы должны установить contenteditable свойство каждого td как истинный. Ниже приведен пример этого с помощью jquery.

$('document').ready(function(){ 
    $('.glyphicon-pencil').click(function() { 
    $('td').prop('contenteditable', true); 
    }); 
}); 

jsFiddle example

---

EDIT: На основе комментариев

$('document').ready(function(){ 
    $('.glyphicon-pencil').closest('button').click(function() { 
    if ($('td').attr('contenteditable') === 'false') { 
     $('td').attr('contenteditable', true); 
    } else { 
     $('td').attr('contenteditable', false); 
    } 

    }); 
}); 

JsFiddle here Обновленные