javascript - 如何将这个参数传递给这个函数？

Question

这是我的功能:

  function updateRecord(id, textEl) {
    db.transaction(function(tx) {
      tx.executeSql("UPDATE products SET product = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
    });
  }

这是电话:

<span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
        item['product'] + '</span>

我想向调用添加一个参数，以便我可以将该函数用于多个列。这是我正在尝试的，但它不起作用:

<span contenteditable="true" onkeyup="updateRecord('+item['id']+', "product", this)">'+
        item['product'] + '</span>

  function updateRecord(id, column, textEl) {
    db.transaction(function(tx) {
      tx.executeSql("UPDATE products SET " + column + " = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
    });
  }

它们应该做完全相同的事情，我只在调用中而不是在函数中指定了 product 列。我的语法是否不正确，我是否遗漏了什么？

编辑: 这是调用所在的完整函数:

  // select all records and display them
  function showRecords() {
    document.getElementById('results').innerHTML = '';
    db.transaction(function(tx) {
      tx.executeSql("SELECT * FROM products", [], function(tx, result) {
        for (var i = 0, item = null; i < result.rows.length; i++) {
          item = result.rows.item(i);
          document.getElementById('results').innerHTML += 
              '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', "product", this)">'+
        item['product'] + '</span> <a href="#" onclick="deleteRecord('+item['id']+')">x</a></li>';
        }
      });
    });
  }

Answer 1

更新: 好的，那么问题仅在于 product 使用双引号。 。使用单引号并转义它们:

document.getElementById('results').innerHTML += 
          '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', \'product\', this)">' + ...;

但是你确实应该考虑重构你的代码。例如。你可以这样写:

var results = document.getElementById('results');
var container = document.createDocumentFragment();
for (var i = 0, l = result.rows.length; i < l; i++) {
    var item = result.rows.item(i);
    var li = document.createElement('li');

    var span = document.createElement('span');
    span.setAttribute('contenteditable', 'true');
    span.onkeyup = (function(item) {
            return function() {
                updateRecord(item['id'], 'product', this);
            }
    }(item));
    span.innerHTML = item['product'];

    var a = document.createElement('a');
    a.href = '#';
    a.onclick = (function(item) {
            return function() {
                deleteRecord(item['id'])
            }
    }(item));
    a.innerHTML = 'x';

    li.appendChild(span);
    li.appendChild(a);
    container.appendChild(li);
}
results.appendChild(container);

代码更多，但从长远来看更容易维护......

---

您有语法和引用问题。这应该有效:

onkeyup="updateRecord('item[\'id\']', 'product', this)"

但是代码对我来说似乎有点奇怪。这是在您实际的 HTML 中还是您正在回显或打印它？因为

<span...>'+ item['product'] + '</span>

在 HTML 中看起来很奇怪。它实际上会写 '+ item['product'] + '里面<span>标签。请发布更完整的代码版本。