title: A simple Cordova android example including Sqlite read/write and search
body: <p>I was working on an Android app project using <code>Cordova</code> which in I had a simple <code>Sqlite</code> database.</p>
  
  <pre><code>--------------------
  ID | Name | Number  |
  --------------------
  </code></pre>
  
  <p>Since I'm new in android apps, I just Got the UI ready. I have two <code>text inputs</code>, a <code>&lt;div&gt;</code> tag to show the table data and 3 <code>buttons</code>. And when the user taps on each columns, a popup show's up for deleting or editing the row contents.</p>
  
  <p><img src="https://i.stack.imgur.com/fjo3u.jpg" alt="enter image description here"></p>
  
  <p>Here's the <code>HTML</code> code for UI:</p>
  
  <pre><code> &lt;body&gt;
      &lt;h1&gt;My first App&lt;/h1&gt;
      &lt;p&gt;Open Database&lt;/p&gt;
      &lt;div id="qrpopup" &gt; //The hidden div tag for implementing the popup
              &lt;hr/&gt;
              &lt;input type="text" id="editNameBox"&gt;&lt;br&gt;
              &lt;input type="text" id="editNumberBox"&gt;&lt;br&gt;
              &lt;button onclick="goDelete()"&gt;Delete&lt;/button&gt;
              &lt;button onclick="goEdit()"&gt;Edit&lt;/button&gt;
              &lt;button onclick="document.getElementById('qrpopup').style.display='none';"&gt;Discard&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          Name&lt;input type="text" value="Name" id="txtName"&gt;
          Number&lt;input type="text" value="123" id="txtNumber"&gt;&lt;hr/&gt;
      &lt;/div&gt;
      &lt;div id="tblDiv"&gt;&lt;/div&gt;
      &lt;div style="text-align: center"&gt;
          &lt;button onclick="goInsert()"&gt;Insert&lt;/button&gt;
          &lt;button onclick="goSearch()"&gt;Search&lt;/button&gt;
          &lt;button onclick="successCB()"&gt;Show All&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Also I used some <code>Css</code> styles to make my app looks better. Here's my <code>style.css</code> file:</p>
  
  <pre><code>input[type='text'] {
         border: 1px solid black;
         width: 200px;
         margin-left: 10px;
  }
  table {
      width:100%;
  }
  table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
  }
  th, td {
      padding: 5px;
      text-align: left;
  }
  table#t01 tr:nth-child(even) {
      background-color: #eee;
  }
  table#t01 tr:nth-child(odd) {
      background-color:#fff;
  }
  table#t01 th    {
      background-color: black;
      color: white;
  }
  button {
      margin: 10px;
      font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important;
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25);
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
      display: inline-block;
      color: white;
      padding: 5px 10px 5px;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      background-color: #BE3E76;
      border-style: none;
      text-align: center;
      overflow: visible;
  }
  
  button:active {
      background-position: 0 -100px;
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
      -webkit-box-shadow: none;
  }
  
  #qrpopup {
      position:fixed;z-index:9999;background-color:rgba(0, 0, 0,0.9);width:100%; height:100%;display:none;
  }
  </code></pre>
  
  <p>But I want to know how can I create insert, edit, delete and search functions using <code>javascript</code> in <code>Cordova</code>? </p>