将表格框更改为输入字段

Question

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

我的桌子是这样的：

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

我现在正在尝试 1 行

jQuery 看起来像这样：

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

输入通过<style>.edit-input {display:none;}</style>按ccs隐藏

但它不起作用。输入是隐藏的，但是当我单击“终端”框时，什么也没有发生。你有什么想法？

Answer 1

您可以将简单的逻辑设置为具有<p> 和它各自的可编辑input 字段。将 class="label-input" 用于 <p> 和 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; ?>

jQuery:

$(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();
     });
  });

JSFiddle Demo