Изменение данных в таблице
 

Всем привет. Есть таблица, которую формирует php скрипт. В каждой строке есть кнопка изменить, по которой открывается форма для изменения данных. Возникла необходимость исправить данные в таблице, точнее изменить данные в 1-ой или 2-х колонках. Клиент не хочет изменять каждую строку отдельно, а хочет исправить значения прямо в таблице. Добавлять форму на таблицу и обрабатывать на php как-то не очень красиво получается. Решил изменять данные, через jquery удалять класс (original) и добавлять класс (edited). Потом по нажатию кнопки через ajax запрос обновлять данные в базе и менять класс назад. Вроде работает. Вот код

<script>
		$(function() {
			$(".matname").change(function(){
				$(this).removeClass("original");
				$(this).addClass("edited");
			}); 				
		});		
	</script>

	<script>
		$(function() {
			$("#saveedited").click(function(){
				$.each($('.edited'), function(index, item) { 
					
					// Здесь пишем в базу
					
					$('#' + item.id).addClass("original");
					$('#' + item.id).removeClass("edited");
				});
			});
		});		
	</script>

Так использовать проблем не будет или есть какой более правильный способ?

А какой смысл клиент вкладывает в понятие "изменять"? Если это на клиенте потренироваться и забыть, на здоровье (причем тут правда стили), а если это изменение данных, то как без формы?

Есть тысячи материалов, которые имеют название. Они выводятся в таблицу, где их можно фильтровать разными способами. Когда запускали приложение, названия вводили, мягко говоря, разнообразно. Теперь решили привести в порядок. Вот, например отфильтровали группу материалов, штук 20. И нужно им всем изменить только название и иногда номер по порядку. Значит нужно 20 раз войти в форму, изменить название, сохранить. А можно прямо в таблице, сделать поле input (textarea) для названия и сразу по месту изменять. Записи, которые изменены, но не сохранены, как-то выделять, например красным. Давая отдельный класс. Потом, по нажатию кнопки, пройти по всем измененным, но не сохраненным записям - записям с этим отдельным классом и через ajax записать в базу, и убрать выделение.

Можно было долго не рассказывать. Если таблица строится на базе данных сервера из базы, а "изменения", это обновление их в базе, то это все равно форма или по крайней мере ее элементы. Хотя можно конечно и заморачиваться, собирая данные скриптом. То есть два пути:

1) Таблица с элементами ввода это форма. Можно любые изменения вносить в любых ее строках. Каждая строка может иметь кнопку Удалить для этой записи в БД. Форма имеет одну кнопку Обновить. Серверу отправляется форма и он производит обновление записей в базе. Изменить только название и номер, это для базы мелочь, даже если это тысячи записей. разукрашивать для этого ячейки не нужно, отдаете все данные для UPDATE. И потом, что значит изменить - держать образ данных отдельно как объект, а при действиях в таблице сравнивать с ним, отмечая в ней неравные? Только так можно знать изменилось или нет. Тогда скриптом собрать все поля из таблицы, значения которых не равны им в объекте и отправить все на сервер.

2) Те же самые элементы формы а кнопки Обновить/Удалить для каждой строки. Серверу отправляются данные только конкретной записи, которая обновляется/удаляется.

Я не представляю человека, который бы не допустил ошибки работая с большим объемом табличных данных. Обычно их выводят либо постранично, либо по фильтру, что сокращает вероятность ошибок.

.change {
    background-color: #FFA5A5;
}

<table id="data">
<tr><td><input data-val="abcd" name="data[11][name]" value="abcd" /></td><td><input data-val="5" name="data[11][range]" value="5" /></td></tr>
<tr><td><input data-val="qwer" name="data[22][name]" value="qwer" /></td><td><input data-val="8" name="data[22][range]" value="8" /></td></tr>
</table>
<button id="send">Update</button>

var tbl = $('#data').on('input', 'input', function() {
    this.classList.toggle('change', this.dataset.val != this.value.trim())
});

$('#send').click(function() {
    var o = tbl.find('input.change');
    if(o.length) {
        o = o.map(function() {
            return {[this.name]: this.value}
        })
        console.log(o)
        //$.ajax()
    }
});

Примерно так, если сравнивать и отправлять только измененные.

В другом месте приложения я так и делал. Но здесь не хочу отправлять форму. Разукрашиваю ячейки по двум причинам, пользователь видит, что есть еще не записанные данные и мне легко их выбрать по имени класса.

А чем хуже, если просто присваивать измененным ячейкам отдельный класс, а потом просто пройтись по всем элементам с таким классом?

Вы что редактируете - ячейки таблицы или данные? Если данные, то почему не поля формы (не важно в ней ли они или вне ее)? Если поля формы, то что вы будете отправлять на сервер - ячейку или данные поля формы под ее именем как ключом? А если данные поля, то зачем посредник в виде ячейки?

Можно вообще удалить таблицу и вполне обойтись без нее, и используя css grid сформировать таблицу из любых элементов плюс полей формы. Работать то все равно нужно с полями.

Редактирую данные, в таблице стоят обычные input/textarea поля, но форму не хочу, так как будет обновление страницы, хочу без обновления. С javascript/jquery опыта мало, поэтому сам смог сделать меняя класс у инпутов, которые изменились, а потом пройтись по всем измененным инпутам и через ajax обновить данные в базе. Понятно, что можно и форму обработать без сабмита, но пока не знаю как.