Получение и вставка значения элемента с использованием делегирования

227

11 августа 2017, 01:05

Написал следующий код для получения значения из input и вставки этого значения в label и в обратном порядке. Но почему то происходит сбрасывание значения введенное в input и тем самым значение не сохраняется, в чем ошибка?

function change(e) { 
 
  if (e.target.tagName == 'TD') { 
    if (activeEl) { 
      activeEl.classList.remove('edit'); 
    } 
 
    activeEl = e.target; 
    var label = activeEl.querySelector('.column-label'); 
    var input = activeEl.querySelector('.column-input'); 
 
    if (activeEl.classList.contains('edit')) { 
      label.textContent = input.value; 
    } else { 
      input.value = label.textContent; 
    } 
 
    activeEl.classList.add('edit'); 
  } 
} 
 
var table = document.getElementById('table'); 
var activeEl; 
 
document.getElementById('table').addEventListener('click', change);

table { 
  margin: 40px auto; 
  // border-spacing: 40px; 
  border-collapse: collapse; 
 
   
} 
 
td { 
    padding: 40px; 
    border: 1px solid #000; 
} 
 
input { 
  display: none; 
} 
 
.edit input { 
  display: block; 
} 
 
.edit label { 
  display: none; 
}

<table id="table"> 
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr> 
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr>   
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr> 
  </table>

Answer 1

В логике.

var table = document.getElementById('table'); 
var activeEl; 
 
function change(e) { 
  if (e.target.tagName == 'TD') { 
    if (activeEl) { 
      activeEl.classList.remove('edit'); 
      var label = activeEl.querySelector('.column-label'); 
      var input = activeEl.querySelector('.column-input'); 
      label.textContent = input.value; 
    } 
 
    activeEl = e.target; 
    var label = activeEl.querySelector('.column-label'); 
    var input = activeEl.querySelector('.column-input'); 
    input.value = label.textContent; 
    activeEl.classList.add('edit'); 
  } 
} 
 
 
document.getElementById('table').addEventListener('click', change);

table { 
  margin: 40px auto; 
  // border-spacing: 40px; 
  border-collapse: collapse; 
} 
 
td { 
    padding: 40px; 
    border: 1px solid #000; 
} 
 
input { 
  display: none; 
} 
 
.edit input { 
  display: block; 
} 
 
.edit label { 
  display: none; 
}

<table id="table"> 
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr> 
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr>   
    <tr> 
      <td class="table-column"> 
        <label class="column-label">1</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">2</label><input type="text" class="column-input"> 
      </td> 
      <td class="table-column"> 
        <label class="column-label">3</label><input type="text" class="column-input"> 
      </td> 
    </tr> 
  </table>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать чтобы ячейка не создавалась если она пустая

Подскажите как сделать так что если нету значения в ячейке mtimein то не создается ячейка если значение есть то ячейка создается и выводит содержимое,...

373

PHP