title: how to edit table column data with jquery/ajax and save to mysql
body: <p>I am using the following code to edit a table of data on the fly for an admin area. It works well with only two columns, but when I add more I am not able to edit the data and have it save to mysql. Can someone show me how to add 5 more columns that will work. Here is a demo and where the code originates <strong><a href="http://demos.9lessons.info/table_edit/TableEdit.htm" rel="nofollow">DEMO</a></strong></p>
  
  <pre><code>&lt;?php include('db.php'); ?&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Live Table Edit&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".edit_tr").click(function() {
          var ID = $(this).attr('id');
          $("#first_" + ID).hide();
          $("#last_" + ID).hide();
          $("#first_input_" + ID).show();
          $("#last_input_" + ID).show();
      }).change(function() {
          var ID = $(this).attr('id');
          var first = $("#first_input_" + ID).val();
          var last = $("#last_input_" + ID).val();
          var dataString = 'id=' + ID + '&amp;firstname=' + first + '&amp;lastname=' + last;
          $("#first_" + ID).html('&lt;img src="load.gif" /&gt;');
  
          if (first.length &amp;&amp; last.length &gt; 0) {
              $.ajax({
                  type: "POST",
                  url: "table_edit_ajax.php",
                  data: dataString,
                  cache: false,
                  success: function(html) {
  
                      $("#first_" + ID).html(first);
                      $("#last_" + ID).html(last);
                  }
              });
          }
          else {
              alert('Enter something.');
          }
  
      });
  
      $(".editbox").mouseup(function() {
          return false
      });
  
      $(document).mouseup(function() {
          $(".editbox").hide();
          $(".text").show();
      });
  
  });
  &lt;/script&gt;
  &lt;style&gt;
  body
  {
      font-family:Arial, Helvetica, sans-serif;
      font-size:14px;
  }
  .editbox
  {
      display:none
  }
  td
  {
      padding:7px;
  }
  .editbox
  {
      font-size:14px;
      width:270px;
      background-color:#ffffcc;
  
      border:solid 1px #000;
      padding:4px;
  }
  .edit_tr:hover
  {
      background:url(edit.png) right no-repeat #80C8E5;
      cursor:pointer;
  }
  
  
  th
  {
      font-weight:bold;
      text-align:left;
      padding:4px;
  }
  .head
  {
      background-color:#333;
      color:#FFFFFF
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table width="100%"&gt;
  &lt;tr class="head"&gt;
  &lt;th&gt;First Name&lt;/th&gt;&lt;th&gt;Last Name&lt;/th&gt;
  &lt;/tr&gt;
  &lt;?php
  $sql=mysql_query("select * from fullnames");
  $i=1;
  while($row=mysql_fetch_array($sql))
  {
  $id=$row['id'];
  $firstname=$row['firstname'];
  $lastname=$row['lastname'];
  
  if($i%2)
  {
  ?&gt;
  &lt;tr id="&lt;?php echo $id; ?&gt;" class="edit_tr"&gt;
  &lt;?php } else { ?&gt;
  &lt;tr id="&lt;?php echo $id; ?&gt;" bgcolor="#f2f2f2" class="edit_tr"&gt;
  &lt;?php } ?&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="first_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $firstname; ?&gt;&lt;/span&gt;
  &lt;input type="text" value="&lt;?php echo $firstname; ?&gt;" class="editbox" id="first_input_&lt;?php echo $id; ?&gt;" /&gt;
  &lt;/td&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="last_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $lastname; ?&gt;&lt;/span&gt; 
  &lt;input type="text" value="&lt;?php echo $lastname; ?&gt;"  class="editbox" id="last_input_&lt;?php echo $id; ?&gt;"/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;?php
  $i++;
  }
  ?&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the code for the ajax file <code>table_edit_ajax.php</code></p>
  
  <pre><code>&lt;?php
  include("db.php");
  if($_POST['id'])
  {
  $id=mysql_escape_String($_POST['id']);
  $firstname=mysql_escape_String($_POST['firstname']);
  $lastname=mysql_escape_String($_POST['lastname']);
  $sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
  mysql_query($sql);
  }
  ?&gt;
  </code></pre>
  
  <h2>edited code</h2>
  
  <pre><code>&lt;?php include('db.php'); ?&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Live Table Edit&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".edit_tr").click(function() {
          var ID = $(this).attr('id');
          $("#first_" + ID).hide();
          $("#last_" + ID).hide();
          $("#othercolumn3_" + ID).hide();
          $("#othercolumn4_" + ID).hide();
          $("#othercolumn5_" + ID).hide();
          $("#first_input_" + ID).show();
          $("#last_input_" + ID).show();
          $("#othercolumn3_input_" + ID).show();
          $("#othercolumn4_input_" + ID).show();
          $("#othercolumn5_input_" + ID).show();
      }).change(function() {
          var ID = $(this).attr('id');
          var first = $("#first_input_" + ID).val();
          var last = $("#last_input_" + ID).val();
          var dataString = 'id=' + ID + '&amp;firstname=' + first + '&amp;lastname=' + last + '&amp;othercolumn3=' + othercolumn3 + '&amp;othercolumn4=' + othercolumn4 + '&amp;othercolumn5=' + othercolumn5;
          $("#first_" + ID).html('&lt;img src="load.gif" /&gt;');
  
          if (first.length &amp;&amp; last.length &amp;&amp; othercolumn3.length &amp;&amp; othercolumn4.length &amp;&amp; othercolumn5.length &gt; 0) {
              $.ajax({
                  type: "POST",
                  url: "table_edit_ajax.php",
                  data: dataString,
                  cache: false,
                  success: function(html) {
  
                      $("#first_" + ID).html(first);
                      $("#last_" + ID).html(last);
                      $("#othercolumn3_" + ID).html(othercolumn3);
                      $("#othercolumn4_" + ID).html(othercolumn4);
                      $("#othercolumn5_" + ID).html(othercolumn5);
                  }
              });
          }
          else {
              alert('Enter something.');
          }
  
      });
  
      $(".editbox").mouseup(function() {
          return false
      });
  
      $(document).mouseup(function() {
          $(".editbox").hide();
          $(".text").show();
      });
  
  });
  &lt;/script&gt;
  &lt;style&gt;
  body
  {
      font-family:Arial, Helvetica, sans-serif;
      font-size:14px;
  }
  .editbox
  {
      display:none
  }
  td
  {
      padding:7px;
  }
  .editbox
  {
      font-size:14px;
      width:270px;
      background-color:#ffffcc;
  
      border:solid 1px #000;
      padding:4px;
  }
  .edit_tr:hover
  {
      background:url(edit.png) right no-repeat #80C8E5;
      cursor:pointer;
  }
  
  
  th
  {
      font-weight:bold;
      text-align:left;
      padding:4px;
  }
  .head
  {
      background-color:#333;
      color:#FFFFFF
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table width="100%"&gt;
  &lt;tr class="head"&gt;
  &lt;th&gt;1&lt;/th&gt;&lt;th&gt;2&lt;/th&gt;&lt;th&gt;3&lt;/th&gt;&lt;th&gt;4&lt;/th&gt;&lt;th&gt;5&lt;/th&gt;
  &lt;/tr&gt;
  &lt;?php
  $sql=mysql_query("select * from offers");
  $i=1;
  while($row=mysql_fetch_array($sql))
  {
  $id=$row['id'];
  $firstname = $row['one'];
  $lastname = $row['two'];
  $othercolumn3 = $row['three'];
  $othercolumn4 = $row['four'];
  $othercolumn5 = $row['five'];
  if($i%2)
  {
  ?&gt;
  &lt;tr id="&lt;?php echo $id; ?&gt;" class="edit_tr"&gt;
  &lt;?php } else { ?&gt;
  &lt;tr id="&lt;?php echo $id; ?&gt;" bgcolor="#f2f2f2" class="edit_tr"&gt;
  &lt;?php } ?&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="first_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $firstname; ?&gt;&lt;/span&gt;
  &lt;input type="text" value="&lt;?php echo $firstname; ?&gt;" class="editbox" id="first_input_&lt;?php echo $id; ?&gt;" /&gt;
  &lt;/td&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="last_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $lastname; ?&gt;&lt;/span&gt; 
  &lt;input type="text" value="&lt;?php echo $lastname; ?&gt;"  class="editbox" id="last_input_&lt;?php echo $id; ?&gt;"/&gt;
  &lt;/td&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="othercolumn3_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $othercolumn3; ?&gt;&lt;/span&gt; 
  &lt;input type="text" value="&lt;?php echo $othercolumn3; ?&gt;"  class="editbox" id="othercolumn3_input_&lt;?php echo $id; ?&gt;"/&gt;
  &lt;/td&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="othercolumn4_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $othercolumn4; ?&gt;&lt;/span&gt; 
  &lt;input type="text" value="&lt;?php echo $othercolumn4; ?&gt;"  class="editbox" id="othercolumn4_input_&lt;?php echo $id; ?&gt;"/&gt;
  &lt;/td&gt;
  &lt;td width="50%" class="edit_td"&gt;
  &lt;span id="othercolumn5_&lt;?php echo $id; ?&gt;" class="text"&gt;&lt;?php echo $othercolumn5; ?&gt;&lt;/span&gt; 
  &lt;input type="text" value="&lt;?php echo $othercolumn5; ?&gt;"  class="editbox" id="othercolumn5_input_&lt;?php echo $id; ?&gt;"/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php
  $i++;
  }
  ?&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ajax</p>
  
  <pre><code>&lt;?php
  include("db.php");
  if($_POST['id'])
  {
  $id=mysql_escape_String($_POST['id']);
  $firstname=mysql_escape_String($_POST['firstname']);
  $lastname=mysql_escape_String($_POST['lastname']);
  $othercolumn3 = mysql_escape_String($_POST['othercolumn3']);
  $othercolumn4 = mysql_escape_String($_POST['othercolumn4']);
  $othercolumn5 = mysql_escape_String($_POST['othercolumn5']);
  $sql = "update offers set firstname='$firstname',lastname='$lastname', othercolumn3='$othercolumn3', othercolumn4='$othercolumn4, othercolumn5='$othercolumn5' where id='$id'";
  mysql_query($sql);
  }
  ?&gt;
  </code></pre>