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

[nastya97core]

Здравствуйте. Есть таблица, где строки - это записи из БД. Мне нужно редактировать эти записи (изменять одно из значений записи).
есть значения:

• id
• список товаров
• стоимость
• статус

В таблице все строки не редактируемые кроме последнего - статус.

<table>
    <tr>
        <td>1</td>
        <td>что-то что-то что-то что-то</td>
        <td>123123</td>
        <td>
<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>
</td>
    </tr>
    <tr>
        <td>2</td>
        <td>что-то что-то</td>
        <td>141414</td>
        <td>
<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>
</td>
    </tr>
    <tr>
        <td>3</td>
        <td>что-то что-то</td>
        <td>333333</td>
        <td>
<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>
</td>
    </tr>
</table>
<button>СОХРАНИТЬ</button>

Мне нужно чтобы, если пользователь изменил select одной из строк и нажал "сохранить" - на сервер отправился бы массив, в котором был список id и их новых статусов, чтобы я потом могла пройти его перебором и записать в БД

foreach ($_POST as $value) {
$datasave["data"] = [
			"number"=>$value['id'],
			"status"=>$value['select'],
		];
		$orders = myapi("collections/save/", "orders", $api, json_encode($datasave));

[ksa]

Мне нужно чтобы, если пользователь изменил select одной из строк и нажал "сохранить" - на сервер отправился бы массив, в котором был список id и их новых статусов, чтобы я потом могла пройти его перебором и записать в БД

Так формируй такой массив

[
   {id: 'ИД1', status: 'Статус1'},
   ...
   {id: 'ИДN', status: 'СтатусN'}
]

потом его можно преобразовать в json- строку и отправить на сервер...

[ksa]

Можно вообще формировать такой УРЛ

<url>?id=id1&st=st1&id=id2&st=st2&id=id3&st=st3&...&id=idN&st=stN

Тогда на сервере (в request) будут доступны два массива

id: ['id1', ..., 'idN']

и

st: ['st1', ..., 'stN']

[nastya97core]

ksa,
а если бы у меня в одной строке было несколько редактируемых параметров, то как в этом случае быть? К примеру в записи с id=1 было изменено input.name = price и input.name = status. А в записи с id=2 только input.name = status. Как бы мне их можно было объединить в один? Ладно в {id: 1} мы можем заранее знать, что это id. А как быть с остальными? Ведь я не знаю будет ли price или status, или даже всё вместе: {price: '123', status: 'Статус 2'}. У меня просто не удалось прописать свой ключ (подставить в ключ переменную)

[ksa]

nastya97core, если изменения не "однородны" - тогда вариант со строкой json более гибок...

К примеру в записи с id=1 было изменено input.name = price и input.name = status. А в записи с id=2 только input.name = status. Как бы мне их можно было объединить в один? Ладно в {id: 1} мы можем заранее знать, что это id. А как быть с остальными?

получится нечто похожее на такой массив объектов

[
   {id: 1, price: '123', status: 'Статус 2'},
   {id: 2, status: 'Статус 3'},
]

Останется только переделать его в json-строку и можно отправлять на сервер.
Если серверный язык не умеет работать со json-строками - можно придумать другой формат строк, который серверу будет более удобен.

[nastya97core]

ksa,
У меня тупик как раз с формированием этого массива. Как его сделать?
Как мне прописать ключ, если я даже заранее не знаю, будет ли он? Вот этот вариант {status: ''} - сделает изменения в БД и сотрёт данные...

[nastya97core]

вот такая таблица.
https://jsfiddle.net/pos2yb0j/

Нужно, чтобы при сохранении создавался массив только изменённых

[
   {id: a1, info: '123', status: 'Статус 2'},
   {id: a2, status: 'Статус 3'},
]

помогите

[рони]

nastya97core,

а можно исходный массив , а не таблицу?

[ksa]

Нужно, чтобы при сохранении создавался массив только изменённых

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
table {
   border-collapse: collapse;
}

td {
   border: 1px solid grey;
   min-width: 10vw;
       padding: 10px;
}

input {
  border:none;
  border-bottom:1px solid black;
}
</style>

<script>
$(function() {
	$('input, select').on('change', function() {
		const o = $(this)
		o.addClass('on')
		o.parents().parent().addClass('on')
	})
	$('#test').on('submit', function() {
		let a = []
		$('#data > tbody > tr.on').each(function() {
			let obj = {}
			const o = $(this)
			const id = o.find('td:first-child').text()
			obj.id = id
			o.find('.on').each(function() {
				obj[this.name] = this.value
			})
			a.push(obj)
		})
		alert(JSON.stringify(a))
		return false
	})
})
</script>
</head>
<body>
<form id='test'>
<table id='data'>
  <thead>
  <tr>
    <td>id</td>
    <td>Стоимость</td>
    <td>Инфо</td>
    <td>Статус</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>a1</td>
    <td><input type="text" name='sum' value="123"></td>
    <td><input type="text" name='info' value="перезвонить"></td>
    <td><select name='status'>
        <option value="value1" selected>В обработке</option>
        <option value="value2">Завершен</option>
        <option value="value3">Невозможен</option>
      </select></td>
  </tr>
  <tr>
    <td>a2</td>
    <td><input type="text" name='sum' value="1413"></td>
    <td><input type="text" name='info'></td>
    <td><select name='status'>
        <option value="value1">В обработке</option>
        <option value="value2" selected>Завершен</option>
        <option value="value3">Невозможен</option>
      </select></td>
  </tr>
  <tr>
    <td>a3</td>
    <td><input type="text" name='sum' value="222"></td>
    <td><input type="text" name='info'></td>
    <td><select name='status'>
        <option value="value1" selected>В обработке</option>
        <option value="value2">Завершен</option>
        <option value="value3">Невозможен</option>
      </select></td>
  </tr>
  </tbody>
</table>

<button>Сохранить</button>
</form>

</body>
</html>

[рони]

nastya97core,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <table>
        <tr>
            <td>id</td>
            <td>Стоимость</td>
            <td>Инфо</td>
            <td>Статус</td>
        </tr>
        <tr class="test">
            <td>a1</td>
            <td>123</td>
            <td><input type="text" value="перезвонить"></td>
            <td><select name="select">
                    <option value="value1" selected>В обработке</option>
                    <option value="value2">Завершен</option>
                    <option value="value3">Невозможен</option>
                </select></td>
        </tr>
        <tr class="test">
            <td>a2</td>
            <td>1413</td>
            <td><input type="text"></td>
            <td><select name="select">
                    <option value="value1">В обработке</option>
                    <option value="value2" selected>Завершен</option>
                    <option value="value3">Невозможен</option>
                </select></td>
        </tr>
        <tr class="test">
            <td>a3</td>
            <td>222</td>
            <td><input type="text"></td>
            <td><select name="select">
                    <option value="value1" selected>В обработке</option>
                    <option value="value2">Завершен</option>
                    <option value="value3">Невозможен</option>
                </select></td>
        </tr>
    </table>
    <button>Сохранить</button>
    <pre id="out"></pre>
    <script>
        const getData = _ => [...document.querySelectorAll('.test')].map(({ cells }) => {
            let [id, price, info, status] = [...cells].map(({
                textContent,
                children
            }) => children.length ? children[0].value : textContent);
            return {
                id,
                info,
                status
            }
        });
        let currentArr = getData();
        document.querySelector('button').addEventListener('click', _ => {
            let arr = getData();
            arr = arr.filter((obj, i) => {
                let el = currentArr[i],
                    test;
                ['info', 'status'].forEach(k => obj[k] === el[k] ? delete obj[k] : (test = true))
                return test
            })
            out.innerHTML = JSON.stringify(arr, "", 1)
        })
    </script>
</body>
</html>