我希望只有使用jquery javascript双击才能编辑html表

Question

您好我想table editable double click我该如何做。

以下是我试过的

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在contenteditable上添加attr click。使用此解决方案，您无需使用dblclick，因为在第一个click中您添加了attr，然后在第二个click上添加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>

编辑：在此 topic 上，您可以找到javascript解决方案，但这里是jquery简单解决方案。我删除了我的答案，但在那之后，我认为可能需要在该主题旁边以及未来。