javascript为sqlite获取的结果

Question

我试图在一个包含文本框和数据的表中的html表中获取数据但是当我试图创建一个html表时，在获取数据时在div中创建了多个表有一种方法创建一个html表和文本框，并在同一个表中获取所有数据

JS Fiddel
HTML：

<input type="hidden" id="id" />First name:
    <input type="text" id="firstName" />
<br />
Last name:
    <input type="text" id="lastName" />
<br />
Phone:
    <input type="text" id="phone" />
<br />
<button class="reset">Reset Form</button>
<button class="update">Update</button>
<button class="insert">Insert</button>
<button class="drop">Drop Table</button>
<div id="results"></div>

正如我们在下面的图像中看到的那样，为每个获取的结果创建了多个表，这些表应该是我的场景中的一个。

JS：

var results = $('#results')[0];
var id = $('#id')[0];
var firstName = $('#firstName')[0];
var lastName = $('#lastName')[0];
var phone = $('#phone')[0];

var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
var selectAllStatement = "SELECT * FROM Contacts";
var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";
var updateStatement = "UPDATE Contacts SET firstName = ?, lastName = ?, phone = ? WHERE id = ?";
var deleteStatement = "DELETE FROM Contacts WHERE id=?";
var dropStatement = "DROP TABLE Contacts";

var db = openDatabase("Book", "1.0", "Address Book", 200000);
var dataset;
createTable();

function onError(tx, error) {
    alert(error.message);
}

function showRecords() {
    results.innerHTML = '';
    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 += '<table><tr><td><input type="text" value="' + item['lastName'] + '"></input> </td>, <td><input type="text" value="' + item['firstName'] + '"></input></td></tr><table>';
            }
        });
    });
}

function createTable() {
    db.transaction(function (tx) {
        tx.executeSql(createStatement, [], showRecords, onError);
    });
}

function insertRecord() {
    db.transaction(function (tx) {
        tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
    });
}

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 updateRecord() {
    db.transaction(function (tx) {
        tx.executeSql(updateStatement, [firstName.value, lastName.value, phone.value, id.value], loadAndReset, onError);
    });
}

function deleteRecord(id) {
    db.transaction(function (tx) {
        tx.executeSql(deleteStatement, [id], showRecords, onError);
    });
    resetForm();
}

function dropTable() {
    db.transaction(function (tx) {
        tx.executeSql(dropStatement, [], showRecords, onError);
    });
    resetForm();
}

function loadAndReset() {
    resetForm();
    showRecords();
}

function resetForm() {
    firstName.value = '';
    lastName.value = '';
    phone.value = '';
    id.value = '';
}

$('.reset').on('click', resetForm);
$('.update').on('click', updateRecord);
$('.insert').on('click', insertRecord);
$('.drop').on('click', dropTable);

Answer 1

最简单的解决方法是将div更改为table并将行添加到其中，而不是将for循环的每次迭代添加table到{{1} } innerhtml。

HTML：

#result

由于您使用的是jQuery，因此您可以使用.append()代替每次迭代设置<input type="hidden" id="id" />First name: <input type="text" id="firstName" /> <br /> Last name: <input type="text" id="lastName" /> <br /> Phone: <input type="text" id="phone" /> <br /> <button class="reset">Reset Form</button> <button class="update">Update</button> <button class="insert">Insert</button> <button class="drop">Drop Table</button> <table id="results"></table><!-- this is the only line that changed --> 。 JS：

innerhtml