我希望html表仅在jquery javascript下双击即可编辑。

Question

嗨，我想要我的table editable on double click，我该怎么做？

​

​

下面的是我尝试过的

​

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

只需在contenteditable上将attr添加为attr即可。使用此解决方案，您不需要使用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>

​

编辑:在这个https://stackoverflow.com/questions/21172465/contenteditable-on-doubleclick上，您可以找到javascript解决方案，但这里是jquery简单解决方案。我删除了我的答案，但在那之后，我想也许这个需要在这个话题之外，也是为了将来。