Изменение поля таблицы на поле ввода

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>

Ввод скрыт для ccs с <style>.edit-input {display:none;}</style>

Это не работает, хотя. Ввод скрыт, но когда я нажимаю на поле «Термин», ничего не происходит. Есть ли у вас какие-либо идеи?

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