Применить php скрипт, в отношении пользователя, которому принадлежит

Доброго времени суток.

У меня на сайте есть список пользователей, который выводится циклом из бд при помощи php, пример:

<div class="user">
   <p>Иван</p><button type="button">Редактировать пользователя</button>
</div>
<div class="user">
   <p>Олег</p><button type="button">Редактировать пользователя</button>
</div>
<div class="user">
   <p>Антон</p><button type="button">Редактировать пользователя</button>
</div>

При нажатии на кнопку "Редактировать пользователя", например, у Антона, нужно чтобы открывалась страница редактирования пользователя, которая в свою очередь, применит внесенные на этой странице изменения только для Антона (И по аналогии с остальными пользователями).

Из идей на данный момент, это цеплять в цикле ссылку на кнопку (во время вывода списка пользователей) с GET параметром идентификатора пользователя и в дальнейшем в скрипте, опираться на этот самый GET. Вот что должно получиться:

<div class="user">
   <p>Иван</p><button href="/edituser?user_id=1" type="button">Редактировать пользователя</button>
</div>
<div class="user">
   <p>Олег</p><button href="/edituser?user_id=2" type="button">Редактировать пользователя</button>
</div>
<div class="user">
   <p>Антон</p><button href="/edituser?user_id=3" type="button">Редактировать пользователя</button>
</div>

Является ли данное решение оптимальным? Или существует другой, более лучший вариант решения данного вопроса.


Ответы (2 шт):

Автор решения: DiD

Можно воспользоваться Grid. Здесь по двойному клику на ячейку вы сразу сможете редактировать поле. Попробуйте выполнить скрипт.

ge = new GridEdit({
  cols: [{
      label: 'ФИО',
      valueKey: 'name',
      type: 'string'
    },
    {
      label: 'Должность',
      valueKey: 'jobTitle',
      type: 'string',
      style: {
        textAlign: 'left'
      }
    },
    {
      label: 'Кол-во проектов',
      valueKey: 'numProjects',
      type: 'number',
      editable: false
    }
  ],
  rows: [{
      name: 'Василий Иванов',
      jobTitle: 'Режисер',
      numProjects: '1000'
    },
    {
      name: 'Петр Сидоров',
      jobTitle: 'Сценарист',
      numProjects: '2'
    },
    {
      name: 'Алексей Овальный',
      jobTitle: 'Массовка',
      numProjects: '2'
    }
  ],
  tableClass: 'table table-bordered',
  beforeInit: function() {
    // console.log('beforeInit');
  },
  afterInit: function() {
    // console.log('afterInit');
  },
  beforeCellActivate: function(cell) {
    if (cell.type === 'date' && cell.editable === true) {
      // console.log(cell, 'This is a date field!');
    }
    if (cell.meta.valueKey === 'notes') {
      // cell.element.onclick = function() {
      //   return false;
      // };
    }
  },
  afterCellActivate: function(cell) {
    // console.log(cell, 'afterCellActivate');
  },
  initialize: true
});
table {
  max-width: 100%;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>td {
  border-top: 0;
}

.table>tbody+tbody {
  border-top: 2px solid #ddd;
}

.table .table {
  background-color: #fff;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
  border: 1px solid #ddd;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
  border-bottom-width: 2px;
}

#contextMenu {
  position: absolute;
}

#contextMenu .disabled {
  color: #C0C0C0;
  background: none;
}

#contextMenu li a {
  cursor: pointer;
}

.active {
  background-color: #FFE16F !important;
  opacity: 0.6;
}

.uneditable {
  background: #FFBBB3 !important;
  opacity: 0.6;
}
<script src="https://www.cssscript.com/demo/easy-editable-data-grid-with-vanilla-javascript-gridedit/gridedit.js"></script>
<div id="gridedit"></div>

Подробнее тут: https://www.cssscript.com/easy-editable-data-grid-with-vanilla-javascript-gridedit/

→ Ссылка
Автор решения: JonBrasers

на кнопку ссылку не ставят, попробуйте так

<div class="user">
<p>Иван</p><a href="/edituser?user_id=1" type="button">Редактировать пользователя</a>
</div>
<div class="user">
<p>Олег</p><a href="/edituser?user_id=2" type="button">Редактировать пользователя</a>
</div>
<div class="user">
<p>Антон</p><a href="/edituser?user_id=3" type="button">Редактировать пользователя</a>
</div>

на странице edituser по $_GET['user_id'] достаете всю инфу юсера и редактируете

если надо с кнопками то можно через форму

<form action="/edituser" method="POST">
<div class="user">
<p>Иван</p><button name="тут user_id" type="button">Редактировать пользователя</button>
</div>
<div class="user">
<p>Олег</p><button name="тут user_id" type="button">Редактировать пользователя</button>
</div>
<div class="user">
<p>Антон</p><button name="тут user_id" type="button">Редактировать пользователя</button>
</div>
</form>
→ Ссылка