Запуск функции обновления таблицы javascript для строки таблицы, отдельной от html?

Question

Я пытаюсь придерживаться строгого разделения javascript с объединением html, и моя текущая проблема заключается в том, что у меня есть несколько таблиц html на странице, когда вы нажимаете на поле в таблице, это редактируемый и должен при снятии флажка обновлять таблицу, отправляя информацию в базу данных SQL динамически.

Теперь моя проблема заключается в том, что способ, которым я сейчас это делаю, находится внутри строки html я не фанат, как показано ниже:

onblur="update_table(this, 'column name', 'row id', 'sql table name')"

Я пытаюсь понять, как я могу передать функции эту информацию, не передавая ее напрямую в виде переменных в функцию.

Таким образом, вместо того, чтобы иметь триггер onblur, создайте прослушиватель в javascript, что-то вроде этого:

 $('.A Class Name for rows or something').on('blur', function () {

Мой мыслительный процесс заключается в том, что у меня должно быть определенное c имя класса, которое все строки есть, чтобы он слушал в этом имени класса? Теперь мне просто интересно, как я получаю информацию из строки, такую ​​как имя столбца, идентификатор строки и какую таблицу sql нужно от go до.

Пожалуйста, дайте мне знать, если это не делает чувство!

Answer 1

Теперь мне просто интересно, как я получаю информацию из строки, такую ​​как имя столбца, идентификатор строки и какая таблица sql нужна для go до.

Мой Первый инстинкт заключается в том, что информация вообще не должна быть в HTML. И независимо от того, есть это или нет, любые обновления БД должны быть строго проверены, так как клиентская часть этого может быть взломана бесконечно. Но включение этой информации в HTML облегчает взлом.

Вы могли бы заменить свои onblur атрибутами data-* в строке. Вместо onblur у вас может быть:

data-column="column name" data-rowid="row id" data-table="sql table name"

или

data-q="sql table name,column name,rowid"

или аналогичный.

Тогда у вас может быть класс на столе, который говорит Вы должны сделать это поведение размытия и использовать делегирование событий, чтобы поймать blur из ячеек в таблицах, где вы включили это:

$(document.body).on("blur", ".handle-blur td", function() {
    var q = $(this).attr("data-q"); // ...or the individual ones...
    // ...call `update_table` here...
});

Но , опять же, я не думаю, я бы поставил это в HTML вообще. Я бы, вероятно, нашел какое-нибудь решение MVC или MVVM (React, et c.), Чтобы информация была не такой открытой. Это не меняет необходимости строгой проверки на стороне сервера, но немного помогает в неизвестности.

Answer 2

Чтобы добавить метаданные к элементу, вы можете использовать data атрибуты. Затем вы можете прочитать их из элемента, когда на нем произойдет событие. Попробуйте это:

<input type="text" class="foo" data-columnname="column name" data-rowid="row id" data-sqltablename="sql table name" />

$('.foo').on('blur', function() {
  var $el = $(this);
  update_table(this, $el.data('columnname'), $el.data('rowid'), $el.data('sqltablename'));
});

Стоит также отметить, что здесь есть несколько потенциальных запахов кода. Во-первых, либо передайте ссылку на элемент (ie. this) в функцию или соответствующие свойства, но не оба. Во-вторых, требовать «имя таблицы» и «имя столбца» в функции на стороне клиента немного странно. Это также потенциальный вектор атаки, раскрывающий эту информацию любому пользователю, просматривающему сайт.