JSP Error Postgres connection - postgresql

I am trying to establish a connection between JSP and Postgres. Unfortunately I only see the table with its columnms, the columnms are not filled. How can I put data into the columns?
My code:
<%# page contentType="text/html; charset=iso-8859-1" language="java"
import="java.sql.* "%>
<%# page import="java.io.*"%>
<html>
<head>
<title>Films Example: JSP</title>
</head>
<body bgcolor="white">
<div>
<h1>Filmworld</h1>
<table border=1>
<tr>
<td>imdbID</td>
<td>name</td>
<td>year</td>
<td>rating</td>
<td>votes</td>
<td>runtime</td>
<td>actors</td>
<td>genres</td>
<td>directors</td>
</tr>
<%
try {
String driver = "org.postgresql.Driver";
String url = "jdbc:postgresql://localhost:5432/movie";
String username = "postgres";
String password = "cemcan";
String myDataField = null;
String myQuery = "SELECT * FROM movie";
Connection myConnection = null;
PreparedStatement myPreparedStatement = null;
ResultSet myResultSet = null;
Class.forName(driver).newInstance();
myConnection = DriverManager.getConnection(url, username, password);
myPreparedStatement = myConnection.prepareStatement(myQuery);
myResultSet = myPreparedStatement.executeQuery();
out.println("<table border=1>");
while (myResultSet.next()) {
String imdbID = myResultSet.getString("imdbID");
String name = myResultSet.getString("name");
int year = myResultSet.getInt("year");
double rating = myResultSet.getDouble("rating");
int votes = myResultSet.getInt("votes");
int runtime = myResultSet.getInt("runtime");
String directors = myResultSet.getString("directors");
out.println("<tr><td>" + imdbID + "</td><td>" + name + "</td><td>" + year + "</td><td>" + rating
+ "</td><td>" + votes + "</td> <td>" + runtime + "</td> <td>" + directors + "</td> </tr>");
}
out.println("</table>");
myConnection.close();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException ex) {
out.print("SQLException: " + ex.getMessage());
out.print("SQLState: " + ex.getSQLState());
out.print("VendorError: " + ex.getErrorCode());
}
%>
</table>
</div>
</body>
</html>


your code has at least two problems:
if you don't have the jdbc driver in the classpath the error goes
into the application server output since you have a line with
e.printStackTrace();. you can check if this is the case because in
the html generated by jsp you did not see the html <table
border=1>
the html is not correct you are putting a table element just after
a .. element. the elements taken ffrom the db do not need
an extra tables, thar are already rows. Using a tbody is more
appropriate
I see that this is an example and it's ok for learning, but in "production code" put the login on the server side (servlet, framework controller, etc) and use at least <%=... %> in jsp instead of out, it helps to separate page markup to program variables

Related

Flask: render_template with object passing says "method not allowed"

I have a dynamic table with students based on class block. That is the table has the list of students in each period block. The HTML which dynamically builds this is
html += "<tr>"+
"<td class='align-middle'><input type='checkbox' class='form-check' style='width:50px;height:50px;'></td>"+
"<td class='align-middle'><input type='image' onclick='StudentClicked(\""+item.FirstName+"\",\""+item.LastName+"\",\""+item.Suffix+"\",\""+item.NickName+"\")' src="+path+" onError='StudentImageError("+i+")' id='studentimage"+i+"' height='100'></td>"+
"<td class='align-middle'>"+item.FirstName +" "+item.LastName+"</td>"+
"<td class='align-middle'></td>"+
"<td class='align-middle'>0</td>" +
"<td class='align-middle'>0</td>"+
"</tr>"
Therefore when the user clicks the image, StudentClicked is called.
function StudentClicked(FirstName, LastName, Suffix, NickName){
$.getJSON('/studentSelected',
{firstName: FirstName, lastName: LastName, suffix: Suffix, nickName: NickName},
function(data){})
}
The idea here is that I want to click the image link and the getJSON will look for my app.route("/studentSelected"). I will perform a database call with the variables I have passed to this route and build an object. I want to pass this object to an html page. Here is the python code for the app.route
#app.route('/studentSelected', methods=['GET','POST'])
def studentSelected():
firstName = request.args.get('firstName', 0, type=str)
lastName = request.args.get('lastName', 0, type=str)
suffix = request.args.get('suffix', 0, type=str)
nickName = request.args.get('nickName', 0, type=str)
students = []
con, cur = ConnectToDatabase()
SQL = "select * from students where FirstName = ? and LastName = ? and Suffix = ? and NickName = ?"
entities = (firstName, lastName, suffix, nickName)
student, cur = Execute(SQL, cur, entities)
return render_template('studentcard.html', student=student)
Currently I get "Method Not Allowed. The method is not allowed for the requested URL." which I interpret as I'm not passing the right method to my route. But as you can I do pass both methods to my route. Why else would I be getting this error? studentcard.html exists in the folder templates.
One guess I have is that the return statement returns functionality to the getJSON function.
What is a better strategy for this type of process. The end result is for the clicked image to run app.route, call the database and then redirect the webapp to a new route for studentSelected and load and run this page.
contents of studentcard.html
{% extends 'layout.html' %}
{% block body %}
<div class="container mt-3">
{% from "includes/_formhelpers.html" import render_field %}
</div>
{% endblock %}

Ignoring blank email address input field Google Apps Script

I have an HTML form which contains email addresses from various suppliers. I am creating a kind of mail merge function so I can send all the contacts a personalised email when the form is submitted. Here is my .gs file:
function sendEmail(form) {
const sSheet = SpreadsheetApp.getActiveSpreadsheet();
const file = DriveApp.getFileById(sSheet.getId());
const documentUrl = file.getUrl();
/* var toEmail = form.toAddress;
var ccEmail = form.ccAddress;
var fromEmail = "****#*****.com";
var subject = form.subject;
var message = form.message; */
var toEmail = "";
var fromEmail = "****#*****.com";
var message = "";
var hotelAddresses = [
form.toAddress1,
form.toAddress2,
form.toAddress3,
form.toAddress4,
form.toAddress5,
form.toAddress6,
form.toAddress7,
form.toAddress8,
form.toAddress9,
form.toAddress10,
form.toAddress11,
form.toAddress12,
form.toAddress13,
form.toAddress14,
form.toAddress15,
form.toAddress16,
form.toAddress17,
form.toAddress18,
form.toAddress19,
form.toAddress20,
form.toAddress21,
form.toAddress22,
form.toAddress23,
form.toAddress24,
form.toAddress25,
form.toAddress26,
form.toAddress27,
form.toAddress28,
form.toAddress29,
form.toAddress30,
form.toAddress31,
form.toAddress32,
form.toAddress33,
];
var contactNames = [
form.contactName1,
form.contactName2,
form.contactName3,
form.contactName4,
form.contactName5,
form.contactName6,
form.contactName7,
form.contactName8,
form.contactName9,
form.contactName10,
form.contactName11,
form.contactName12,
form.contactName13,
form.contactName14,
form.contactName15,
form.contactName16,
form.contactName17,
form.contactName18,
form.contactName19,
form.contactName20,
form.contactName21,
form.contactName22,
form.contactName23,
form.contactName24,
form.contactName25,
form.contactName26,
form.contactName27,
form.contactName28,
form.contactName29,
form.contactName30,
form.contactName31,
form.contactName32,
form.contactName33,
];
var days = [
form.day1,
form.day2,
form.day3,
form.day4,
form.day5,
form.day6,
form.day7,
form.day8,
form.day9,
form.day10,
form.day11,
form.day12,
form.day13,
form.day14,
form.day15,
form.day16,
form.day17,
form.day18,
form.day19,
form.day20,
form.day21,
form.day22,
form.day23,
form.day24,
form.day25,
form.day26,
form.day27,
form.day28,
form.day29,
form.day30,
form.day31,
form.day32,
form.day33,
];
var dates = [
form.date1,
form.date2,
form.date3,
form.date4,
form.date5,
form.date6,
form.date7,
form.date8,
form.date9,
form.date10,
form.date11,
form.date12,
form.date13,
form.date14,
form.date15,
form.date16,
form.date17,
form.date18,
form.date19,
form.date20,
form.date21,
form.date22,
form.date23,
form.date24,
form.date25,
form.date26,
form.date27,
form.date28,
form.date29,
form.date30,
form.date31,
form.date32,
form.date33,
];
var times = [
form.time1,
form.time2,
form.time3,
form.time4,
form.time5,
form.time6,
form.time7,
form.time8,
form.time9,
form.time10,
form.time11,
form.time12,
form.time13,
form.time14,
form.time15,
form.time16,
form.time17,
form.time18,
form.time19,
form.time20,
form.time21,
form.time22,
form.time23,
form.time24,
form.time25,
form.time26,
form.time27,
form.time28,
form.time29,
form.time30,
form.time31,
form.time32,
form.time33,
];
var additionalInfo = [
form.additional1,
form.additional2,
form.additional3,
form.additional4,
form.additional5,
form.additional6,
form.additional7,
form.additional8,
form.additional9,
form.additional10,
form.additional11,
form.additional12,
form.additional3,
form.additional14,
form.additional15,
form.additional16,
form.additional17,
form.additional18,
form.additional19,
form.additional20,
form.additional21,
form.additional22,
form.additional23,
form.additional24,
form.additional25,
form.additional26,
form.additional27,
form.additional28,
form.additional29,
form.additional30,
form.additional31,
form.additional32,
form.additional33,
];
for(var i = 0; i<times.length; i++){
var subject = "Meeting - " + days[i] + ", " + dates[i] + " at " + times[i];
toEmail = hotelAddresses[i];
message = "Dear " + contactNames[i] + ","
+"<br><br>"+
"Please confirm the meeting on " + days[i] + " " + dates[i] + " at " + times[i] + "." + "<br>" + "<br>" +
additionalInfo[i] +
" If you could kindly let me know if you are able to confirm that would be great." + "<br>" + "<br>" +
"Many thanks and I look forward to hearing from you soon." + "<br>" + "<br>" +
"Yours sincerely," + "<br>" + "<br>" +
form.yourName + "<br>" + "<br>"
+ "<em><b>" + form.yourPosition + "</b></em> <br><br>" +
"<span style='color:#0e216d'><b> Company name. </b>" + "<br>" +
GmailApp.sendEmail(
toEmail, // recipient
subject, // subject
'test', { // body
htmlBody: message // advanced options
}
);
}
}
It works fine except that sometimes the input fields for email will be blank, in which case I need the script to ignore that supplier and continue to run. At the moment it is obviously hitting the empty input and stopping the execution.
I presume I need a conditional statement of sorts... something along the lines of if(hotelAddresses[i] != null) {}
But I cannot work out where to insert this...
Additional: 31 Aug 18
For the HTML I have a series of objects (33 in total) that are all set up like this:
<input type="checkbox" id="check1" class="check" checked>
<input type="text" id="name1" class="contactNameInput" name="toAddress1">
<input type="text" id="contactName1" class="contactNameInput mailName" name="contactName1">
<input type="text" id="time1" class="contactNameInput hidden mailTime" name="time1">
<input type="text" id="day1" class="contactNameInput hidden mailDay" name="day1">
<input type="text" id="date1" class="contactNameInput hidden mailDate" name="date1">
<textarea class="additional contactNameInput" id="additional1" name="additional1" placeholder="Additional requests..."></textarea>
<div class="preview1"></div>

You want to separate the cases with and without hotelAddresses[i] using a script like if(hotelAddresses[i] != null) {}. When my understanding is correct, how about this modification?
Modification points:
Do you want to add after "<span style='color:#0e216d'><b> Company name. </b>" + "<br>" +? In the current script, it's "<span style='color:#0e216d'><b> Company name. </b>" + "<br>" + GmailApp.sendEmail(...). If you want to add more strings, please put them. If you don't want to add, please remove the last +.
I think that the script of if(hotelAddresses[i] != null) {} can be used in the for loop.
The script which reflected above is as follows.
Modified script:
In this modified script, the script of for loop was modified.
for(var i = 0; i<times.length; i++) {
var toEmail = hotelAddresses[i];
if (toEmail) {
var subject = "subject";
var message = "messages";
GmailApp.sendEmail(toEmail, subject, 'test', {htmlBody: message});
} else {
// do something
}
}
Note:
In this modified script, subject and message are replaced by "subject" and "messages", respectively. So please modify them for your situation.
If you want to do something when hotelAddresses[i] is null, please modify // do something.
If you don't want to do something when hotelAddresses[i] is null, please remove else {}.
If I misunderstand your question, please tell me. I would like to modify it.

Show local HTML file with JavaScript in SWT Browser widget in RAP

For my RAP-project I need to show some charts. Because I haven't found any widget for this purpose, my plan was to use the browser widget, so I can use JavaScript-Plugins like Highcharts or Chartsjs. But I can't get it working. If I set an HTML-File in browser.setUrl, the browser widget don't show anything, not even simple HTML. The JavaScript-Console in Chrome says
Not allowed to load local resource
If I enter the HTML-Code with the setText method it shows the HTML, but JavaScript is not working, it don't load external JS-File like the jQuery-library.
Can't this be done this way? Or where is my failure? (Sorry for my bad englisch, I'm not native speaker.)
Here's the Java-Code I tried:
browser = new Browser(composite, SWT.NONE);
browser.setTouchEnabled(true);
browser.setBounds(10, 10, 358, 200);
browser.setUrl("D:\\STATS\\statistiken.html");
Or this:
File file = new File("D:\\STATS\\statistiken.html");
browser = new Browser(composite, SWT.NONE);
browser.setTouchEnabled(true);
browser.setBounds(10, 10, 358, 200);
browser.setUrl(file.toURI().toString());
I tried also some other things, there were not working to.
With HTML in setText-method (I tried external libraries and local libraries in same folder):
browser = new Browser(composite, SWT.NONE);
browser.setBounds(10, 10, 358, 200);
browser.setText(
"<html>" +
"<head>" +
"<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"></script>" +
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>" +
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>" +
"</head>" +
"<body>" +
"<p>Test</p>" +
"<div id=\"container\" style=\"min-width: 400px; height: 400px; margin: 0 auto\"></div>" +
"</body>" +
"</htm>");
Hope someone can help me with this problem.

Local links will not be resolved and external links will not be loaded(Cross Domain problem) in your case.
I could suggest you 2 Solutions.
Solution 1:
This is useful when you have very few resources(html, javascript, css) to render on Browser and no Hyperlinks(which when cliked will load a different page).
You can use Velocity. Read this to start using Velocity.
You can have all the static content in Velocity Template and inject Dynamic content into it at Runtime.
Here is the excerpt from one of my Projects.
init.vm
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.transcript {
background-color: #d2d2d2;
}
.messageBlock {
margin-left: 4px;
margin-bottom: -15px;
}
.message {
margin-left: 115px;
word-wrap: break-word;
white-space: -moz-pre-wrap;
_white-space: pre;
white-space: pre-wrap;
}
</style>
</head>
<script type="text/javascript">
function resizeChatWindow() { var divT = document.getElementById("divTranscript"); divT.style.height = (document.body.clientHeight - getTopAreaHeight()) + "px"; divT.style.width = (document.body.clientWidth) + "px"; divT.style.overflow = "auto"; divT.style.position = "absolute"; divT.style.left = "0px"; divT.style.top = getTopAreaHeight() + "px";}
function getTopAreaHeight() { var chatAlert = document.getElementById("chatAlert"); if (chatAlert) { return chatAlert.clientHeight; } return document.getElementById("divBody").clientHeight;}
isChat=false; window.onresize=resizeChatWindow;
</script>
<script type="text/javascript">
$scriptText
</script>
<script type="text/javascript">
function addChat(chatText){
$("#divTranscript").append(chatText);
$("#divTranscript").animate({ scrollTop: $("#divTranscript")[0].scrollHeight }, "slow");
}
</script>
<body onload="resizeChatWindow();">
<div id="divBody"></div>
<div id="divTranscript">$history</div>
</body>
</html>
VelocityUtils
private void init() throws Exception {
ve = new VelocityEngine();
Properties velocityProperties = new Properties();
velocityProperties.put("resource.loader", "class");
velocityProperties.put("class.resource.loader.description", "Velocity Classpath Resource Loader");
velocityProperties.put("class.resource.loader.class", "org.apache.velocity.runtime.resource.loader.ClasspathResourceLoader");
ve.init(velocityProperties);
//ve.init();
}
public String getInitHtml(String history) throws ResourceNotFoundException, ParseErrorException, Exception {
/* now render the template into a StringWriter */
StringWriter writer = null;
/* next, get the Template */
Template t = ve.getTemplate("templates/init.vm","UTF-8");
/* create a context and add data */
VelocityContext context = new VelocityContext();
String script = IOUtils.toString(VelocityUtils.class.getResourceAsStream("script/jquery.min.js"), "UTF-8");
context.put("scriptText", script); //You can even have all the script content in init.vm rather than injecting it at runtime.
context.put("history", StringUtils.defaultIfBlank(history, StringPool.BLANK));
writer = new StringWriter();
t.merge(context, writer);
/* show the World */
String returnMe = writer.toString();
return returnMe;
}
set the returned String in Browser.setText()
Solution 2:
I explained it here.

Getting Image path instead of Image - PhoneGap Listview

I am working on an PhoneGap application in which I am saving user's name , number and Email , after that I am displaying that data to another page in list - view. That has been done very successfully. But now when I want to store Image of user in my local Storage, I am getting the path of image instead of Image.
I am saving my data in this way :
<SCRIPT Language="JavaScript" charset="utf-8" type="text/javascript">
var userName, userNumber, userEmail, userImage ;
function showAndClearField(frm)
{
userName = frm.name.value;
userNumber = frm.number.value;
userEmail = frm.email.value;
if (frm.name.value == "" )
{
alert("Please enter your name!")
}
else if(frm.number.value == "")
{
alert("Please enter your number!")
}
else if(frm.email.value == "")
{
alert("Please enter your Email !")
}
else
{
alert("Name : " + userName + '\n' + " Number: " + userNumber + '\n' + " Email: " + userEmail )
frm.name.value = ""
frm.number.value = ""
frm.email.value = ""
var db = window.openDatabase("TestingDemo", "1.0", "PhoneGapTesting Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
function populateDB(tx)
{
tx.executeSql('INSERT INTO DEMO (id, data, userName, userNumber, userEmail, userImage) VALUES (1, "Third row", "'+ userName +'" , "'+ userNumber +'" , "'+ userEmail +'", "'+ userImage +'")');
}
While displaying data I am using following code :
var nameOfUser , numberOfUser , emailOfUser, imageOfUser;
for (var i=0; i<len; i++)
{
nameOfUser = results.rows.item(i).userName;
numberOfUser = results.rows.item(i).userNumber;
emailOfUser = results.rows.item(i).userEmail;
imageOfUser = results.rows.item(i).userImage;
numArr.push({ name : nameOfUser , number : numberOfUser , email : emailOfUser, image : imageOfUser });
}
function createCheckboxes(){
$("#createBtn").remove();
$("#content").append('<fieldset id="cbFieldSet" data-role="controlgroup" style = "padding : 20px" >');
var length = numArr.length;
for(var i=0;i<length;i++)
{
$("#cbFieldSet").append('<input type="checkbox" name= "cb-'+i+'" id="cb-' + i +'" number = "'+numArr[i].name+'"/> <label for= "cb-'+i+'">' + "Name : " + numArr[i].name + ' <br>' + "Email : " + numArr[i].email +' <br>' + " Number " + numArr[i].number +' <br>' + numArr[i].image + ' <br><br> </label>' );
alert("List Created !");
}
alert("Out of For loop !");
$("#content").trigger("create");
alert("Content Created !");
$("#showBtn").css("visibility","visible");
}
function showSelectedNames(){
var count = $("#cbFieldSet input:checked").length;
var str = '';
for(i=0;i<count;i++){
str += ' '+$("#cbFieldSet input:checked")[i].value;
}
alert("You selected----"+str);
}
</script>
How the view I am getting is :

i do not know about this particular program,
but i do know that you are passing the image location as an argument, (text).
the other arguments are also text, and you have no done anything differently with the image argument to have the UI display an image. maybe you are missing image tags, or an "getImage(location)" type function.
edit:
<img src="PATH" />
you need to put PATH as image location and this is what will display it.

Editing and deleting a newly added table row using Jquery

I'm adding new rows dynamically to the existing table, the first column of the table holds the Edit & Delete buttons. I'm facing 2 problems with this:
Not able to Edit and Delete newly added rows, tried .live but couldn't make it work
Not able to get the record id of the newly added rows (ajax returns the record when new rows are added).
Code looks like this:
Adding new rows:
<script type="text/javascript">
$(function() {
$('#btnSubmit').click(function() {
var oEmployee = new Object();
oEmployee.Title = $("#Title").val();
oEmployee.Middlename = $("#MiddleName").val();
oEmployee.Lastname = $("#LastName").val();
oEmployee.Email = $("#Email").val();
var DTO = {'employee': oEmployee};
var options = {
type: "POST",
url: "WebService.asmx/InsertEmployee",
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (response.d != "") {
if (parseInt(response.d) >= 1) {
var contactID;
contactID = parseInt(response.d);
$('#tblEmployee tbody tr:first').after("<tr id=" + contactID + "><td><input type='button' class='newContactID' value='Edit'/> <input type='button' value='Delete'/></td><td align=center>" + contactID + "</td><td align=center>" + oEmployee.Title + "</td><td align=center>" + oEmployee.Middlename + "</td><td align=center>" + oEmployee.Lastname + "</td><td align=center>" + oEmployee.Email + "</td><tr>"); // need to hook up editing and deleting function to the newly added rows }
else {
alert("Insert Failed \n" + response.d);
}
}
}
};
//Call the webservice
$.ajax(options);
});
});
</script>
Code for editing and deleting:
$(function() {
$("#tblEmployee > tbody > tr ").each(function() {
var TRID = $(this).attr("id");
$(this).find("td:first > input[value=Edit]").click(function() {
ResetOtherRowEdit();
ChangeTableCellToTextbox(TRID);
$(this).hide();
$("#tblEmployee > tbody > tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
return false;
});
$(this).find("td:first > input[value=Update]").click(function() {
UpdateRow(TRID);
});
$(this).find("td:first > input[value=Delete]").click(function() {
DeleteRow(TRID);
});
$(this).find("td:first > input[value=Cancel]").click(function() {
CancelEdit(TRID);
});
});
});
What is the best way to approach this? Editing and deleting of records work fine when they're pulled off the database.
Update
This is how the code looks like now, just began dabbling with Jquery a month back, still trying to get my head around it.
$(function() {
$("#tblEmployee > tbody > tr ").live('click', function(e) {
var TRID = $(this).attr("id");
var $target = $(e.target);
if ($target.is('#btnEdit')) {
$(this).find("td:first > input[value=Edit]").click(function() {
ResetOtherRowEdit();
ChangeTableCellToTextbox(TRID);
$(this).hide();
$("#tblEmployee > tbody > tr[id=" + TRID + "] > td:first> input[value=Delete]").hide();
return false;
});
}
else if ($target.is('#btnUpdate')) {
$(this).find("td:first > input[value=Update]").click(function() {
UpdateRow(TRID);
});
}
else if ($target.is('#btnCancel')) {
$(this).find("td:first > input[value=Cancel]").click(function() {
CancelEdit(TRID);
});
}
else if ($target.is('#btnDelete')) {
$(this).find("td:first > input[value=Delete]").click(function() {
DeleteRow(TRID);
});
}
});
});
HTML codes looks like this:
<ItemTemplate>
<tr id='<%# Eval("ContactID") %>'>
<td width="10%">
<input type="button" value="Edit" id="btnEdit"/>
<input type="button" value="Delete" id="btnDelete"/>
<input type="button" value="Update" style="display:none" id="btnUpdate" />
<input type="button" value="Cancel" style="display:none" id="btnCancel"/>
</td>
<td width="10%" align="center"><%# Eval("ContactID")%></td>
<td width="20%" align="center"><%# Eval("Title")%></td>
<td width="20%" align="center"><%# Eval("MiddleName")%></td>
<td width="20%" align="center"><%# Eval("LastName")%></td>
<td width="20%" align="center"><%# Eval("EmailAddress")%></td>
</tr>
</ItemTemplate>

You could take advantage of DOM traversal and .live() to make this work. Add a listener using .live() to the rows of the table. Inside this method, determine which element was clicked (e.currentTarget). You can use a simple conditional to check if it was a button that needs to react. Then, use DOM traversal to nail down what you want to have happen. For example, if e.currentTarget is the delete button, the you can use $(this).closest('tr').remove(); to delete the row. If you need to interact with the data through ajax, make your ajax function support passing in whatever valus you'd need (id) to perform the delete. In order to obtain the id, you'll need to get it from the ajax call and put it somewhere inside the DOM so you can retrieve it when you need it. You can always toss in a 'title' attribute when the tr is generated.

Here is a same script with php
http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php/
// Add new record
$(document).on("click","."+editbutton,function(){
var id = $(this).attr("id");
if(id && editing == 0 && tdediting == 0){
// hide editing row, for the time being
$("."+table+" tr:last-child").fadeOut("fast");
var html;
html += "<td>"+$("."+table+" tr[id="+id+"] td:first-child").html()+"</td>";
for(i=0;i<columns.length;i++){
// fetch value inside the TD and place as VALUE in input field
var val = $(document).find("."+table+" tr[id="+id+"] td[class='"+columns[i]+"']").html();
input = createInput(i,val);
html +='<td>'+input+'</td>';
}
html += '<td><img src="'+updateImage+'"> <img src="'+cancelImage+'"></td>';
// Before replacing the TR contents, make a copy so when user clicks on
trcopy = $("."+table+" tr[id="+id+"]").html();
$("."+table+" tr[id="+id+"]").html(html);
// set editing flag
editing = 1;
}
});