i want html table to be editable on double click only with jquery javascript

Question

Hi i want to have my table editable on double click how would i do that.

below is what i have tried

$(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>

@Mr.x The single click is the problem, i guess – A. Wolff Dec 30 '17 at 08:18 — A. Wolff, Dec 30 '17 at 08:18

Pedram · Accepted Answer · 2017-12-30T08:51:45.157

Simply add contenteditable as attr on click. With this solution you don't need to use dblclick, because in first click you add attr then on second click you can edit your content.

$('.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: on this topic you can find javascript solution, but here is jquery simple solution. I deleted my answer but after that i thought maybe this need beside that topic, and for future.

Ya this is better even if for doubleclick both click have to be done in a specific laps of time. Here, you can click once, wait ten minutes, then reclick it would make the TD editable BUT it isn't a doubleclick. That's said, i guess it is acceptable behaviour for OP :) You could of course handle it using a timeout but i'm not sure it worth it — A. Wolff, Dec 30 '17 at 08:48
@A.Wolff Yeah, this line `$('.zui-table td').not($(this)).prop('contenteditable', false);` maybe make it better. if you click once, then click on other `td` it `false` `contenteditable`, but still a little buggy, if you don't click on other `td` or `blur` it `contenteditable` on next click. — Pedram, Dec 30 '17 at 08:56
Anyway i guess your answer is an acceptable one but i'm not OP... — A. Wolff, Dec 30 '17 at 08:58

i want html table to be editable on double click only with jquery javascript

1 Answers1