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) 制作应用程序，因此您通常会在目标 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 回答