jhgyg

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="jquery2.css">

  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">

  <link rel="stylesheet" href="https://codiqa.com/view/c54825de/css">

  <!-- jQuery and jQuery Mobile -->
  <script src="jquery.js"></script>
  <script src="jquery2.js"></script>
  <script src="storage.js"></script>
  <!-- Extra Codiqa features -->
  <script src="codiqa.js"></script>

  <script src="https://codiqa.com/view/c54825de/js"></script>
</head>

<body>


   <div data-role="page" data-control-title="Home" id="home">
      <div data-theme="a" data-role="header">
          <h3>
              Scores
          </h3>
           <a href=# data-role=button id=create> Create List </a>
    <a href=# data-role=button id=remove> Delete DB </a>
      </div>

  <div data-role=content>
       <a data-role="button" rel="external" href="index.html" data-icon="home" data-iconpos="left">
              Go Home
          </a>
    <span> Location and Date </span>
    <input type=text id=lname>
    <span> Event Name and Time </span>
    <input type=text id=fname>
    <span> Location and Date </span>
    <input type=text id=bname>
    <span> Event Name and Time </span>
    <input type=text id=cname>
    <a href=# data-role=button id=insert>Add Score To Datbase</a>
    <a href=# data-role=button id=list>List of Scores</a>
  </div>
</div>

<div data-role=page id=win2 data-add-back-btn=true>
  <div data-role=header>
    <h1>List of Scores</h1>
  </div>

  <div data-role=content>
  </div>
</div>

</body>
</html>

<script>

var db = openDatabase ("Test", "1.0", "Test", 65535);

$("#create").bind ("click", function (event)
{
  db.transaction (function (transaction)
  {
    var sql = "CREATE TABLE customers " +
        " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
        "lname VARCHAR(100) NOT NULL, " +
        "fname VARCHAR(100) NOT NULL)" +
        "bname VARCHAR(100) NOT NULL)" +
        "cname VARCHAR(100) NOT NULL)"
    transaction.executeSql (sql, undefined, function ()
    {
      alert ("Table created");
    }, error);
  });
});

$("#remove").bind ("click", function (event)
{
  if (!confirm ("Delete table?", "")) return;;
  db.transaction (function (transaction)
  {
    var sql = "DROP TABLE customers";
    transaction.executeSql (sql, undefined, ok, error);
  });
});

$("#insert").bind ("click", function (event)
{
  var lname = $("#lname").val ();
  var fname = $("#fname").val ();
  var bname = $("#bname").val ();
  var cname = $("#cname").val ();

  db.transaction (function (transaction)
  {
    var sql = "INSERT INTO customers (lname, fname, bname, cname) VALUES (?, ?, ?, ?)";
    transaction.executeSql (sql, [lname, fname, bname, cname], function ()
    {
      alert ("Score inserted");
    }, error);
  });
});

$("#list").bind ("click", function (event)
{
  db.transaction (function (transaction)
  {
    var sql = "SELECT * FROM customers";
    transaction.executeSql (sql, undefined,
    function (transaction, result)
    {
      var html = "<ul>";
      if (result.rows.length)
      {
        for (var i = 0; i < result.rows.length; i++)
       {
         var row = result.rows.item (i);
         var lname = row.lname;
         var fname = row.fname;
         var bname = row.bname;
         var cname = row.cname;
         html += "<li>" + lname + "&nbsp;" + fname + "&nbsp;" + bname + "&nbsp;" + cname + "</li>";
        }
      }
      else
      {
        html += "<li> No Score </li>";
      }

      html += "</ul>";

      $("#win2").unbind ().bind ("pagebeforeshow", function ()
      {
        var $content = $("#win2 div:jqmData(role=content)");
        $content.html (html);
        var $ul = $content.find ("ul");
        $ul.listview ();
      });

      $.mobile.changePage ($("#win2"));

    }, error);
  });
});

function ok ()
{
}

function error (transaction, err)
{
  alert ("DB error : " + err.message);
  return false;
}

</script>