It is necessary to do so that the user on the site could enter data into the database. Created just such a table: The table displays data from the database With the jQuery library made data entry into the table, here's the code

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

How can I make it so that data can only be entered in certain cells? Now it turns out like this: enter image description here enter image description here enter image description here

It is necessary to make the column “No.”, “Date / Time” and the first row cannot be changed, and the rest is possible. Is there any such possibility? I think that everything is simple, but I don’t shave in js. JQuery-3.3.1.js library

  • <input disabled = "disabled">? - Dima Kaukin

2 answers 2

It's simple - wrap the first line in the <thead> , the rest of the cells in <tbody> . Cells that do not need to be edited add a class
<td class="lock"> .
And the selector will look like this:
$('tbody td').not('.lock').click.....

  • Thank! Have helped! - Dmitriy Saxarov

You can use the contenteditable attribute, you can also place <input> s only where it is needed, or use the readonly attribute for <input> in which input is prohibited.

 $('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>

  • How everything is really simple), thanks. - Dmitriy Saxarov