时间戳

首页 > 解决方案 > 为与html分开的表行触发表更新javascript函数？

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

问题描述

我试图将 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 表。

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

标签： javascriptjqueryhtml

解决方案

要将元数据添加到元素，您可以使用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）传递给函数或相关属性，而不是两者。其次，在客户端函数中同时要求“表名”和“列名”有点奇怪。它还可能是一种攻击媒介，会将这些信息暴露给查看该站点的任何用户。

推荐阅读