0

我在 html5 中使用 SQLite，它运行良好。但问题是我在页面本身中显示的行看起来并不那么好。我使用 innerhtml 来显示用户插入的行。这是脚本

function showRecords() {

    results.innerHTML = '';
    // This function needs a single argument, which is a function that takes
    // care of actually executing the query
    db.transaction(function(tx) {
        tx.executeSql(selectAllStatement, [], function(tx, result) {
            dataset = result.rows;
            for ( var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                results.innerHTML += '<li>' + item['lastName'] + ' , '
                                    + item['firstName']
                                    + ' <a href="#" onclick="loadRecord(' + i
                                    + ')">edit</a>  '
                                    + '<a href="#" onclick="deleteRecord(' + item['id']
                                    + ')">delete</a></li>';
            }
        });
    });
}

/**
 * Loads the record back to the form for updation
 * 
 * @param i
 */
function loadRecord(i) {
    var item = dataset.item(i);
    firstName.value = item['firstName'];
    lastName.value = item['lastName'];
    phone.value = item['phone'];
    id.value = item['id'];
}

/**
 * Delete a particular row from the database table with the specified Id
 * 
 * @param id
 */
function deleteRecord(id) {
    db.transaction(function(tx) {
        tx.executeSql(deleteStatement, [ id ], showRecords, onError);
    });
    resetForm();
}

所以在代码showRecords()方法中，我对要显示的数据进行了硬编码。我想要的是，数据应该以适当的表格格式显示。我知道我必须在 JavaScript 中创建元素以生成动态表格，但我无法这样做，也无法在表格中显示内容。
每次用户填写表单并单击插入按钮时，插入语句都会被执行，然后showRecords()方法被调用。我无法找出正确的解决方案。

4

1 回答 1

1

对于纯 JavaScript 解决方案，我认为这（未经测试）会起作用：

function loadRecord(i) {
    var item = dataset.item(i);
    firstName.value = item.firstName;
    lastName.value = item.lastName;
    phone.value = item.phone;
    id.value = item.id;
}
function showRecords() {
    results.innerHTML = '';
    // This function needs a single argument, which is a function that takes
    // care of actually executing the query
    db.transaction(function (tx) {
        var i = 0,
            table = document.createElement('table'),
            tbody = document.createElement('tbody');
        tx.executeSql(selectAllStatement, [], function (tx, result) {
            var tr = {},
                tdName = {},
                tdEdit = {},
                tdDel = {},
                span = {},
                aEdit = {},
                aDel = {};
            dataset = result.rows;
            for (i = 0, item = null; i < dataset.length; i += 1) {
                //create new table elements
                tr = document.createElement('tr');
                tdName = document.createElement('td');
                tdEdit = document.createElement('td');
                tdDel = document.createElement('td');
                aEdit = document.createElement('a');
                aDel = document.createElement('a');
                //grab dataset row
                item = dataset.item(i);
                //set the name
                tdName.innerText = item.lastName + ' , ' + item.firstName;
                //create the edit link
                aEdit.href = '#';
                aEdit.onclick = loadRecord(i);
                aEdit.innerText = ' edit ';
                tdEdit.appendChild(aEdit);
                //create the delete link
                aDel.href = '#';
                aDel.onclick = deleteRecord(item.id);
                aDel.innerText = ' delete ';
                tdDel.appendChild(aDel);
                //append to row
                tr.appendChild(tdName);
                tr.appendChild(tdEdit);
                tr.appendChild(tdDel);
                //append to body
                tbody.appendChild(tr);
            }
        });
        table.appendChild(tbody);
        results.innerHTML = table.outerHTML;
    });
}
/**
 * Delete a particular row from the database table with the specified Id
 * 
 * @param id
 */
function deleteRecord(id) {
    db.transaction(function (tx) {
        tx.executeSql(deleteStatement, [id], showRecords, onError);
    });
    resetForm();
}
于 2012-06-21T11:05:19.937 回答