Jquery 将表格框更改为输入字段

我正在为可编辑的联系人公式创建一个表。联系人从数据库中提取并放入表中。然后，我想能够点击其中一个表格框（即“名称”），它将该框切换到一个输入字段，这样我就可以编辑信息并保存它

我的桌子看起来像这样：

<?php while($dsk=$stmk->fetch(PDO::FETCH_ASSOC)) : ?>
  <tr>
    <td><p id="termin" onclick="hide()"><?= htmlspecialchars($dsk['Termin']); ?></p><input id="intermin" class="edit-input" value="<?= htmlspecialchars($dsk['Termin']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Name']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Vorname']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Geburtsdatum']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Beruf']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Telefon']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Info']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Anrufe']); ?>" /></td>
    <td><input value="<?= htmlspecialchars($dsk['Art']); ?>" /></td>
  </tr>
<?php endwhile; ?>

<script (document).getElementById(id+"p").onclick = function hide(){
            $("#termin").hide();
            $("#intermin").show().focus();
        };
        $("#intermin").focusout = function() {
            $("#intermin").hide();
            $("#termin").show();
        };
});></script>

您可以将简单的逻辑设置为具有
，并且它是相应的可编辑
输入字段。将class=“label input”用于
，将class=“edit input”用于各自的输入，并围绕它构建您的逻辑

请参阅下面的代码-

<?php while($dsk=$stmk->fetch(PDO::FETCH_ASSOC)) : ?>
    <tr>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Termin']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Termin']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Name']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Name']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Vorname']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Vorname']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Geburtsdatum']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Geburtsdatum']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Beruf']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Beruf']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Telefon']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Telefon']); ?>" style="display:none"/>
      </td>
      <td>
        <p class="label-input"><?= htmlspecialchars($dsk['Info']); ?></p>
        <input class="edit-input" value="<?= htmlspecialchars($dsk['Info']); ?>" style="display:none"/>
      </td>
      <td>
         <p class="label-input"><?= htmlspecialchars($dsk['Anrufe']); ?></p>
         <input class="edit-input" value="<?= htmlspecialchars($dsk['Anrufe']); ?>" style="display:none"/>
      </td>
      <td>
          <p class="label-input"><?= htmlspecialchars($dsk['Art']); ?></p>
          <input class="edit-input" value="<?= htmlspecialchars($dsk['Art']); ?>" style="display:none"/>
      </td>
</tr>
<?php endwhile; ?>

没有一个tds或输入有ID。看起来很好，也不起作用。输入是隐藏的，单击时不会发生任何错误。我现在已经更正了jquery脚本。请尝试将新值应用于
p
元素。另外，将“显示：无”样式添加到初始输入。我已经更新了我的帖子，还添加了工作JSFIDLE。请看一看，它也在JSFIDLE上工作，如果它对您不起作用，那么它可能是一些不同的问题。您能为JSFIDLE提供在其上重新创建的问题，以便我可以查看它吗？我如何在JSFIDLE中插入php
$(function(){
    $(document).on('click', '.label-input', function(){
       $(this).hide();
       var $input = $(this).next('.edit-input')
       $input.show();
       $input.focus();
    });

     $(document).on('focusout', '.edit-input', function(){
       $(this).hide();
       var $label = $(this).prev('.label-input');
       $label.text($(this).val());
       $label.show();
     });
  });