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 に答える