title: how to know which row is selected in jquery modal dialog box
body: <p>I have designed a page using jquery dialog box. There are suppose 5 rows and i want to edit or delete a particular row say for example third row. By searching in the google i got this </p>
  
  <pre><code>$(document).ready(function(){
      $("#dlgConfirm").hide();
  });
  &lt;!-- the following lines are for deleting the row--&gt;
  $(function() {
      $(".deleteRow").click(function(){
          var $row = $(this).parents('tr');
          $( "#dlgConfirm" ).dialog({
              resizable: false,
              height:140,
              modal: true,
              buttons: {
                  "Delete selected Appointment": function() {
                      $row.remove();
                      $( this ).dialog( "close" );
                  },
                  Cancel: function() {
                      $( this ).dialog( "close" );
                  }
              }
          });     
  });
  });
  </code></pre>
  
  <p>its deleting from the page but i need to delete also from the DB. So i wanted to know how to get the column values and row values so that i can use delete from table where row=3</p>
  
  <p>![enter image description here][1]</p>
  
  <p>displaying tables code is as follows</p>
  
  <pre><code>&lt;%DataBaseConnection db=new DataBaseConnection();
          Connection con=db.connet();
          try
          {
              PreparedStatement pt= con.prepareStatement("select * from Appointments where login='"+session.getAttribute("login")+"' order by date desc");
              ResultSet rs=pt.executeQuery();
              while(rs.next())
              {
                  %&gt;&lt;tr&gt;
                  &lt;td&gt;&lt;%=rs.getString("Name") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("Date") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("StartTime") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("EndTime") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("Description") %&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;!--&lt;input type="button" id="edit" value="" onclick="" /&gt;&lt;img src="edit.png"&gt;--&gt;
  &lt;a href="#" class="edit-btn"&gt;&lt;img src="edit.png" alt="edit"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                     &lt;!-- &lt;input type="button" id="delete" value="Delete" /&gt;--&gt;
  &lt;a href="#" class="deleteRow"&gt;&lt;img src="delete.png" height="20" width="20" alt="delete"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;%}
          }
          catch(Exception e)
          {
              out.println(e);
          }
  </code></pre>
  
  <p><strong>full code</strong> </p>
  
  <pre><code>&lt;%@page import="java.sql.*" %&gt;
  &lt;%@page import="DB.*" %&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Appointment&lt;/title&gt;
  &lt;link href="jtable/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  
  
  
  
  &lt;style&gt;
  body {
      font-size: 62.5%;
  }
  label, input {
      display:block;
  }
  input.text {
      margin-bottom:12px;
      width:95%;
      padding: .4em;
  }
  fieldset {
      padding:0;
      border:0;
      margin-top:25px;
  }
  h1 {
      font-size: 1.2em;
      margin: .6em 0;
  }
  div#users-contain {
      width: 350px;
      margin: 20px 0;
  }
  div#users-contain table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
  }
  div#users-contain table td, div#users-contain table th {
      border: 1px solid #eee;
      padding: .6em 10px;
      text-align: left;
  }
  .ui-dialog .ui-state-error {
      padding: .3em;
  }
  .validateTips {
      border: 1px solid transparent;
      padding: 0.3em;
  }
  div#users-contain table tr:hover {
      border: 1px solid #c6c6c6;
      color: #333;
      text-decoration: none;
      transition: all 0.0s;
      background-color: #00ffff;
      box-shadow: 0 1px 1px rgba(0.2, 0.3, 0.4, 0.1);&lt;!-- change rgba--&gt;
  }
  &lt;/style&gt;
  &lt;script&gt;
  
  var request;
  var name;
  var date;
  var StartTime;
  var EndTime;
  var Description;
  var allFields;
  var tips;
  
  function getRequestObject() {
      if (window.ActiveXObject) {
          return (new ActiveXObject("Microsoft.XMLHTTP"));
      } else if (window.XMLHttpRequest) {
          return (new XMLHttpRequest());
      } else {
          return (null);
      }
  }
  
  function sendRequest(name, date, startDate, endDate, description) {
  
      //alert($("#name").val(), $("#date").val(), $("#StartTime").val(), $("#EndTime").val(), $("#Description").val());
  
      request = getRequestObject();
      request.onreadystatechange = handleResponse;
      request.open("GET", "saveRecord.jsp?name=" + name + "&amp;date=" + date + "&amp;startDate=" + startDate + "&amp;endDate=" + endDate + "&amp;description=" + description, true);
      request.send(null);
  }
  
  function handleResponse() {
      if (request.readyState == 4 &amp;&amp; request.status == 200) {
  //        alert(request.responseText);
  alert("success");
      }
  }
  
  
  $(function () {
         name = $("#name"),
          date = $("#date"),
          StartTime = $("#StartTime"),
          EndTime = $("#EndTime"),
          Description = $("#Description"),
          allFields = $([]).add(name).add(StartTime).add(EndTime).add(Description).add(date),
          tips = $(".validateTips");
  
      function updateTips(t) {
          tips.text(t)
              .addClass("ui-state-highlight");
          setTimeout(function () {
              tips.removeClass("ui-state-highlight", 1500);
          }, 500);
      }
  
      function checkLength(o, n, min, max) {
          if (o.val().length &gt; max || o.val().length &lt; min) {
              o.addClass("ui-state-error");
              updateTips(n + " can not be empty");
              return false;
          } else {
              return true;
          }
      }
  function checkTime(z,y)
  {
  if (y.val()&lt;z.val()) {
              z.addClass("ui-state-error");
              updateTips( " start time can not be more than end time");
              return false;
          } else {
              return true;
          }
  }
  
      function checkRegexp(o, regexp, n) {
          if (!(regexp.test(o.val()))) {
              o.addClass("ui-state-error");
              updateTips(n);
              return false;
          } else {
              return true;
          }
      }
      $("#dialog-form").dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
              "Create Appointment": function () {
                  var bValid = true;
                  allFields.removeClass("ui-state-error");
   bValid = bValid &amp;&amp; checkLength( name, "Name", 1, 16 );
  bValid = bValid &amp;&amp; checkLength( date, "date", 1, 80 );
  bValid = bValid &amp;&amp; checkLength( StartTime, "Start Time", 1, 16 );
  bValid = bValid &amp;&amp; checkLength( EndTime, "End Time", 1, 16 );
  bValid = bValid &amp;&amp; checkTime(StartTime,EndTime);
                  if (bValid) {
                      $("#users tbody").append("&lt;tr&gt;" +
                          "&lt;td&gt;" + name.val() + "&lt;/td&gt;" +
                          "&lt;td&gt;" + date.val() + "&lt;/td&gt;" +
                          "&lt;td&gt;" + StartTime.val() + "&lt;/td&gt;" +
                          "&lt;td&gt;" + EndTime.val() + "&lt;/td&gt;" +
                          "&lt;td&gt;" + Description.val() + "&lt;/td&gt;" +
                          "&lt;td&gt;" + '&lt;a href="#"&gt;&lt;img src="edit.png" alt="edit"&gt;' + "&lt;/td&gt;" +
                          "&lt;td&gt;" + '&lt;a href="#" class="deleteRow"&gt;&lt;img src="delete.png" height="20" width="20" alt="delete"&gt;' + "&lt;/td&gt;" +
                          "&lt;/tr&gt;");
  
                  //alert(name.val());
          sendRequest(name.val(), date.val(), StartTime.val(), EndTime.val(), Description.val());
                  $(this).dialog("close");}
              },
              Cancel: function () {
                  $(this).dialog("close");
              }
          },
          close: function () {
              allFields.val("").removeClass("ui-state-error");
          }
      });
      $('.edit-btn').click(function() { $("#dialog-form").dialog("open"); });
      $("#create-user")
          .button()
          .click(function () {
          $("#dialog-form").dialog("open");
  $('#date').datepicker({
        dateFormat: 'yy-mm-dd'
  });
   $("#dialog-form").dialog();    
      });
  });
  $("#dialog-form").hide();
  
  $(document).ready(function(){
      $("#dlgConfirm").hide();
  });
  &lt;!-- the following lines are for deleting the row--&gt;
  $(function() {
      $(".deleteRow").click(function(){
          var $row = $(this).parents('tr');
          $( "#dlgConfirm" ).dialog({
              resizable: false,
              height:140,
              modal: true,
              buttons: {
                  "Delete selected Appointment": function() {
                      $row.remove();
                      $( this ).dialog( "close" );
                  },
                  Cancel: function() {
                      $( this ).dialog( "close" );
                  }
              }
          });     
  });
  });
  &lt;!--deleting the row ends here--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section id="page"&gt;
  &lt;div id="dialog-form" title="Create new Appointment"&gt;
      &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;
      &lt;form&gt;
          &lt;fieldset&gt;
              &lt;label for="name"&gt;Name&lt;/label&gt;
              &lt;input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /&gt;
              &lt;label for="date"&gt;Date&lt;/label&gt;
              &lt;input type="text" name="date" id="date" value="yyyy-mm-dd" class="text ui-widget-content ui-corner-all"  /&gt;
              &lt;label for="StartTime"&gt;Start Time&lt;/label&gt;
              &lt;input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all"  /&gt;
              &lt;label for="EndTime"&gt;End Time&lt;/label&gt;
              &lt;input type="text" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" /&gt;
              &lt;label for="Description"&gt;Description&lt;/label&gt;
              &lt;input type="text" name="Description" id="Description" value="" class="text ui-widget-content ui-corner-all" /&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="users-contain" class="ui-widget"&gt;
      &lt;div align="center"&gt;
              &lt;h1&gt;Appointment Details&lt;/h1&gt;
  
      &lt;/div&gt;
      &lt;table id="users" class="ui-widget ui-widget-content"&gt;
          &lt;thead&gt;
              &lt;tr class="ui-widget-header "&gt;
                  &lt;th style="min-width:200px;max-width: 300px;"&gt;Name&lt;/th&gt;
                  &lt;th style="min-width:100px;"&gt;Date&lt;/th&gt;
                  &lt;th style="min-width:100px;"&gt;Start Time&lt;/th&gt;
                  &lt;th style="min-width:100px;"&gt;End Time&lt;/th&gt;
                  &lt;th style="min-width:250px;max-width: 250px;"&gt;Description&lt;/th&gt;
                  &lt;th&gt;Edit&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;%DataBaseConnection db=new DataBaseConnection();
          Connection con=db.connet();
          try
          {
              PreparedStatement pt= con.prepareStatement("select * from Appointments where login='"+session.getAttribute("login")+"' order by date desc");
              ResultSet rs=pt.executeQuery();
              while(rs.next())
              {
                  %&gt;&lt;tr&gt;
                  &lt;td&gt;&lt;%=rs.getString("Name") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("Date") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("StartTime") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("EndTime") %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%=rs.getString("Description") %&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;!--&lt;input type="button" id="edit" value="" onclick="" /&gt;&lt;img src="edit.png"&gt;--&gt;
  &lt;a href="#" class="edit-btn"&gt;&lt;img src="edit.png" alt="edit"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                     &lt;!-- &lt;input type="button" id="delete" value="Delete" /&gt;--&gt;
  &lt;a href="#" class="deleteRow"&gt;&lt;img src="delete.png" height="20" width="20" alt="delete"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;%}
          }
          catch(Exception e)
          {
              out.println(e);
          }
  
          %&gt;
              &lt;!--&lt;tr&gt;
                  &lt;td&gt;name&lt;/td&gt;
                  &lt;td&gt;Date&lt;/td&gt;
                  &lt;td&gt;Start Time&lt;/td&gt;
                  &lt;td&gt;End Time&lt;/td&gt;
                  &lt;td&gt;Description&lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="button" id="edit" value="Edit" onclick="" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="button" id="delete" value="Delete" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;--&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;button id="create-user"&gt;Create Appointments&lt;/button&gt;
  &lt;!-- the following lines are for deleting the row--&gt;
  &lt;div id="dlgConfirm" title="Delete the selected Appointment?"&gt;
      &lt;p&gt;
      &lt;span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"&gt;&lt;/span&gt;
      The selected details will be deleted and cannot be recovered. Are you sure?
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- deleting rows ends here--&gt;&lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when i am writing the following codes, i get output this type</p>
  
  <pre><code>$(".deleteRow").click(function(){
          var rowid = $(this).parents('tr').attr('id');
          $( "#dlgConfirm" ).dialog({
              resizable: false,
              height:140,
              modal: true,
              buttons: {
                  "Delete selected Appointment": function() {
                      removeRow(rowid);
                      $( this ).dialog( "close" );
                  },
                  Cancel: function() {
                      $( this ).dialog( "close" );
                  }
              }
          }); 
  });
  
  function removeRow(rowid){
  
      $.ajax({
          url: 'deleteAppointments.jsp',
          data: {id: rowid}
  
          success: function(){
               $('table tr#'+rowid).remove();
          }
      });
  
  }
  </code></pre>
  
  <p>the codes for deleteAppointments.jsp is as follows</p>
  
  <pre><code>&lt;%!String id;String login;int uid; %&gt;
  &lt;%
  id=request.getParameter("id");
  uid=Integer.parseInt(id);
  DataBaseConnection db=new DataBaseConnection();
  login=(String)session.getAttribute("login");
  Connection con=db.connet();
  try{
  PreparedStatement pt=con.prepareStatement("delete from Appointments where UID="+uid+" and login='"+login+"'");
  int result=pt.executeUpdate();
  }
  </code></pre>
  
  <p>![enter image description here][2]</p>