0

私はiPodで実行するためにこの非常に小さなアプリケーションを書いています。入力したワークアウトに基づいて情報を保存することを目的としています。保存場所はhtml5ローカルデータベースになります。私の質問は、複数の演習があるフォームから情報を取得し、演習ごとに新しいレコードを作成するにはどうすればよいですか？htmlは次のとおりです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>lower</title>
        <meta name="description" content="" />
        <meta name="author" content="john" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="work.js" type="text/javascript" charset="utf-8"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=0.6; minimum-scale=0.6; user-scalable=0;" />        
    </head>

    <body>
        <h1>Lower Body</h1>
        <div>
            <form method="post" id="workout_form">          
                <div>
                <table id="hipadd">
                    <label for="hipAddReps">Hip Adductor</label>
                    <tr><td>Seat <input type="text" id="hipAddSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="hipAddReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAddWeight" size="3" /></td></tr>
                </table>
            </div><br />
            <div>
                <table id="hipab">
                    <label for="hipAbReps">Hip Abductor</label>
                    <tr><td>Seat <input type="text" id="hipAbSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="hipAbReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="hipAbWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legcurl">
                    <label for="legCurlReps">Leg Curl</label>
                    <tr><td>Back <input type="text" id="legCurlBackSetting" size="1"/></td><td>Feet </td><td><input type="text" id="legCurlFeetSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legCurlReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legCurlWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legext">
                    <label for="legExtensionReps">Leg Extension</label>
                    <tr><td>Back <input type="text" id="legExtensionBackSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legExtensionReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legExtensionWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="legpress">
                    <label for="legPressReps">Leg Press</label>
                    <tr><td>Back <input type="text" id="legPressBackSetting" size="1"/></td><td>Seat </td><td><input type="text" id="legPressSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="legPressReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="legPressWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <table id="glute">
                    <label for="gluteReps">Glute</label>
                    <tr><td>Seat <input type="text" id="gluteSeatSetting" size="1"/></td></tr>
                    <tr><td>Reps <input type="text" id="gluteReps" size="2" value="10"/></td><td>Weight </td><td><input type="text" id="gluteWeight" size="3"/></td></tr>
                </table>
            </div><br />
            <div>
                <button type="button" onclick="insertData()">Submit</button>
            </div>
            </form>
        </div>

    </body>
</html>

私が今まで持っているJavaScriptは

 $(function(){ initDatabase();

});

function initDatabase() {
    try {
        if (!window.openDatabase) {
            alert('Local Databases are not supported by your browser.');
        } else {
            var shortName = 'WorkoutDB';
            var version = '1.0';
            var displayName = 'Workout Database';
            var maxSize = 100000;
            db = openDatabase(shortName, version, displayName, maxSize);
            createTables();
        }
    } catch(e) {
        if (e == 2) {
            // Version mismatch.
            console.log("Invalid database version.");
        } else {
            console.log("Unknown error "+ e +".");
        }
        return;
    } 
}

 $(document).ready(function(){
        db.transaction(function (transaction) {
            //transaction.executeSql('drop table workout');
            transaction.executeSql('CREATE TABLE IF NOT EXISTS workout(name TEXT, back TEXT, seat TEXT, feet TEXT, reps TEXT, weight TEXT);', [], nullDataHandler, errorHandler);
        }
    );
    //insertData();
 });

 function insertData(){
    var data = [$("label[for=hipAddReps]").text(), '', $('#hipAddSeatSetting').val(), '', $('#hipAddReps').val(), $('#hipAddWeight').val()];
        db.transaction(function (transaction) {         
            transaction.executeSql("INSERT INTO Workout(Name, Back, Seat, Feet, Reps, Weight) VALUES (?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5]]);
    });
 }


function errorHandler(transaction, error){
    if (error.code==1){
        // DB Table already exists
    } else {
        // Error is a human-readable string.
        console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');
    }
    return false;
}


function nullDataHandler(){
    console.log("SQL Query Succeeded");
}

したがって、このフォームのすべてのフィールドに入力し、下部にある送信ボタンを押して、演習ごとに新しいレコードを挿入する必要があります。

4

1 に答える 1

0

iOS（iPod）用のアプリケーションを作成するので、通常はObjective Cでこれを行いますが、HTML5で行うには、優れたフレームワークを調べる必要があります。Phonegapを見てください。彼らはあなたを素早く立ち上げて実行するための入門ガイドさえ持っています。代替手段は、完全に無料ではありませんが、 appceleratorです。

フォームデータを携帯電話に保存する場合は、軽量データベースまたはフラットファイルストレージの使用を検討する必要があります。これはphonegapのストレージに関する推奨事項へのリンクです。

例：

 <!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    var db = window.openDatabase("test", "1.0", "Test DB", 1000000);
}

</script>
</head>
 <body>
  <h1>Example</h1>
  <p>Open Database</p>
 </body>
</html>

iphone、ipod、iOSの開発に関するすばらしい本が必要な場合は、Big Nerd Ranchの本をお勧めします。これは、アップルの開発者アカウントの設定ですべての赤いテープを紹介する初めての素晴らしい本です。

幸運を祈ります。より多くの露出を得るために、phonegapとiOSタグを使用して質問を再投稿することをお勧めします。

于 2012-08-09T17:08:56.513 に答える