Как изменить отдельную ячейку в таблице на странице (HTML)?

193

21 сентября 2018, 18:50

Нужно сделать чтобы пользователь на сайте мог вводить данные в БД. Создал вот такую таблицу: С библиотекой jQuery сделал ввод данных в таблицу, вот код

<script type="text/javascript">
$(function()    {
    $('td').click(function(e)   {
        //ловим элемент, по которому кликнули
        var t = e.target || e.srcElement;
        //получаем название тега
        var elm_name = t.tagName.toLowerCase();
        //если это инпут - ничего не делаем
        if(elm_name == 'input') {return false;}
        var val = $(this).html();
        var code = '<input type="text" id="edit" value="'+val+'" />';
        $(this).empty().append(code);
        $('#edit').focus();
        $('#edit').blur(function()  {
            var val = $(this).val();
            $(this).parent().empty().html(val);
        });
    });
});
$(window).keydown(function(event){
    //ловим событие нажатия клавиши
    if(event.keyCode == 13) {   //если это Enter
        $('#edit').blur();  //снимаем фокус с поля ввода
    }
});
</script>

Как мне сделать так, чтобы вводить данные можно было только в определенные ячейки? Сейчас получается вот так:

Нужно сделать, чтоб столбец "№", "Дата/Время" и первую строку невозможно было изменить, а остальные возможно. Есть ли вообще такая возможность? Думаю, что все просто, но в js не шарю. Библиотека jQuery-3.3.1.js

Answer 1

Все просто - первую строку оберните в тэг <thead>, остальные ячейки в <tbody>. Ячейкам которые не нужно редактировать добавьте класс
<td class="lock">.
И селектор будет выглядеть так:
$('tbody td').not('.lock').click.....

Answer 2

Можно использовать атрибут contenteditable, также можно размещать <input>-ы только там, где это необходимо или использовать атрибут readonly для <input> в которые запрещён ввод.

$('td,th').on('input',function(){ 
  console.log($(this).text()); 
})

table{ 
  border-collapse:collapse; 
} 
th{ 
  font-weight:400; 
} 
td,th{ 
  padding:5px; 
  border:1px solid gray; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <thead> 
    <tr> 
      <th>№</th> 
      <th>Дата/Время</th> 
      <th>ФИО</th> 
      <th>Адрес</th> 
    </tr> 
  <thead> 
  <tbody> 
    <tr> 
      <td>1</td> 
      <td>12.12.1212</td> 
      <td contenteditable>ААГ</td> 
      <td contenteditable>defaultCity</td>  
    </tr> 
    <tr> 
      <td>2</td> 
      <td>11.11.1111</td> 
      <td contenteditable>ББА</td> 
      <td contenteditable>defaultCity</td>  
    </tr> 
  </tbody> 
</table>