javascript - 触发与 html 分开的表行的表更新 JavaScript 函数？

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 () {

我的思考过程是，我应该有一个所有行都有的特定类名，以便它监听该类名？现在我只是想知道如何从行中获取信息，如列名、行 ID 以及它需要转到哪个 sql 表。

如果这没有意义，请告诉我!

Answer 1

要将元数据添加到元素，您可以使用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'));
});

还值得注意的是，这里存在一些潜在的代码异味。首先，将元素引用(即 this)传递给函数或相关属性，而不是两者都传递。其次，在客户端函数中同时要求“表名”和“列名”有点奇怪。它也可能是一种攻击媒介，会将这些信息暴露给任何浏览该网站的用户。