Управление таблицей с помощью JavaScript / jQuery

Question

Мне нужно реализовать следующую функциональность в JavaScript / jQuery и сводить меня с ума. У меня есть идея, как я могу реализовать это, используя множество идентификаторов. Однако мне нужно реализовать это с помощью классов, потому что они будут динамическими, и нет смысла иметь разные идентификаторы для каждой строки.

Взять в качестве примера следующую таблицу:

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

Если флажок у Джона Доу установлен, мне нужно показать диапазон ИЗМЕНЕНИЯ для соответствующего флажка. Поэтому мне нужно добавить этот элемент с помощью jQuery. Следующим будет результат:

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK</span>&nbsp;<span class="defaultLocation">Change</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

если щелкнуть диапазон ИЗМЕНЕНИЯ, мне нужно показать текстовое поле для соответствующего флажка. Результатом будет следующая таблица:

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK&nbsp;<input type="text" /></span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

Если флажок «Джон Доу» не установлен, соответствующая строка возвращается без текстового поля и без диапазона изменения, как в первой таблице

Если выбрано несколько флажков, вторая, третья и т. Д. Строки должны следовать одной и той же процедуре, не теряя функциональности из ранее выбранных флажков.

Если в заголовке таблицы установлен флажок CheckAll, все строки должны следовать процедуре, описанной выше.

Мне нужно услышать ваше мнение о лучших методах достижения этой цели. Я знаю логику этого, но мне не удается запрограммировать его с помощью JavaScript и jQuery. Например, в jQuery, когда вы сохраняете элемент в строке, чтобы вы могли манипулировать им с помощью простого JavaScript, у вас больше нет простого доступа к DOM.

Любая помощь будет принята с благодарностью

Answer 1

Попробуйте:

$(".myClass").click(function(){
  if(this.checked){
     var changeElement = getChangeElement()
     $(this).parents('tr').children('.changable').append($(changeElement))
     attachEventsToCHANGE()
  }else{
     $(this).parents('tr').children('.changable .defaultLocation').remove()
  }
})

function getChangeElement(){
   var changeElement= $("<span class='defaultLocation'>Change</span>")
     $(changeElement).click(function(){
      $(this).after("<input type='text' />")
      $(this).remove()
   })
   return changeElement;
}

Я не проверял это, но думаю, что это поможет вам !!

Answer 2

Возможно, вы можете привязать к «измененному» событию все флажки.Внутри Eventhandler вы, вероятно, могли бы сделать что-то вроде

function changeHandler(event) {
 if ($(this).val('checked') == checked) {
  $(this).parents('tr').children('.changeable').append('<span>bla<span>');
 } else {
  $(this).parents('tr').children('.defaultLocation').remove();
}

Обработчик щелчков в «Change» Span должен быть довольно простым.