I cannot edit the rows that are newly added. I have included the class in the newly added row. But when I click the edit button in the newly added row, its not working. Also the edit button is not working once I edit the row. I can't edit the same row two times. The function is not calling when I click the button edit.
Can u guys help me out?
Following is the reproduction of my issue -
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$('.edit').on('click',(event)=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
Can I do without using onclick() ? How to do so?
The problem is that when you load the onclick listeners for .edit there you have only two buttons, and the script don't know news rows.
If you will add dynamically rows it need another context to can execute it.
Just replace this:
$('.edit').on('click',(event)=>{...})
by
$("tbody").on("click", ".edit", (event) =>{...})
Update:
you could take name & age when you open the edit box like this:
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$("tbody").on("click", ".edit", event => {
let $btnParentSiblings = $(event.currentTarget).parent().siblings('td')
let $name = $btnParentSiblings[1];
let $age = $btnParentSiblings[2];
$("#popup > #name").val($($name).html());
$("#popup > #age").val($($age).html());
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
because your JavaScript code is running once the document is fully loaded and at that moment searches for all elements with edit class and assign their click event the editing method. so when you add a new element you must manually assign the method to its edit button.
Related
I want to "Hide" the table during the starting of page, which is working using $(document).ready(function(){$("#result").hide();});
But I also want to "show" the table once the submit button is clicked, which is not working.
This is the PHP file, as I have to add more PHP code afterwards. Same result if I change this to HTML thou.
<!DOCTYPE html>
<html lang ="en">
<head>
<title> Show Specific </title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#result").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#result").show();//result
});
});
</script>
</head>
<body>
<hr>
<div id="appointment">
<form>
Test ID: <input type="text" name="testID" /> <br><br>
First Name : <input type="text" name="First_Name" /> <br><br>
Last Name : <input type="text" name="Last_Name" /> <br><br>
<input id="submit" type="button" value="Submit" ><br><br>
</form>
</div>
<div id="result">
<table>
<tr>
<th>Test ID</th>
</tr>
<tr>
<th>First Name </th>
</tr>
<tr>
<th>Last Name</th>
</tr>
</table>
</div>
<hr>
<div id="footer">
<footer> Copyright © ALL RIGHTS ARE RESERVED. </footer>
</div>
</body>
</html>
If you look carefully, the id of your input button is submit not button as you have written on your jQuery event handler.
Change your script to this one:
<script>
$(document).ready(function(){
$("#result").hide();
$("#submit").click(function(){
$("#result").show();//result
});
});
</script>
Also: it is not necessary for you to have two $(document).ready() methods. Just implement one, and then add your function inside.
I am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.
Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>User Info</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body data-ng-app="MyAPP" ng-controller="myController">
<div>
<h1><u>User Information </u></h1>
<table style="width 100%" align="center">
<caption>Enter the information below</caption>
<tr>
<th>Entry</th>
<th>Input</th>
<th>Input Stored</th>
</tr>
<tr>
<td>Enter Your id </td>
<td><input type="number" ng-model="id" placeholder="Enter 4 digit id here" pattern="[1-9]{1}[0-9]{3}"></td>
<td><span ng-bind="id"></span></td>
</tr>
<tr>
<td>Enter your full name </td>
<td><input type="text" ng-model="name" placeholder="Enter full name here" pattern="[a-zA-Z\s]+"></td>
<td><span ng-bind="name"></span></td>
</tr>
</table>
</div>
<div class="btn-group" align="center">
<button type="button" ng-click="myFunction()" id="one" class='btn btn-default btn-success btn-lg btn1'>Save Entry</button>
<button type="button" ng-click="close_window()" id="two" class='btn btn-default btn-success btn-lg btn2'>Exit</button>
</div>
<script>
var admin = angular.module('MyAPP', []);
admin.controller('myController', function ($scope) {
$scope.myFunction = function () {
var change = document.getElementById("one")
if (change.innerHTML == "Save Entry") {
change.innerHTML = "Saved!";
} else {
change.innerHTML = "Save Entry";
}
}
$scope.close_window = function () {
if (confirm("Close Window?")) {
close();
}
});
</script>
</body>
</html>
I'm trying to save the content entered in fields using localStorage so that i can display it later. But as soon as i add the controller field the button's stop working and their function is not executed. Also how do i store these varibles, in code there are 4 variables so that i can show them again in a table?
I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.
I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.
Thanks in advance.
You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old.
So you can try this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
<script>
$('document').ready(function(){
$('#time').timepicker();
$('#time').on('changeTime', function() {
var x = $("#time").val();
$('#d_time').val("Maintenance Tonight - " +x);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if ($('#default').is(':checked')) {
$('#default_subject').css('display','block');
$('#custom_subject').css('display','none');
}
else if ($('#custom').is(':checked')) {
$('#custom_subject').css('display','block');
$('#default_subject').css('display','none');
}
}
</script>
<td>
<input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="default" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" type="text" value="custom"/>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
put the on change function on a document ready
$( document ).ready(function() {
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
}
the thing is that the element is not created in the time you fire the functon so you need to wait untill the document is ready or put this function at the end of the document.
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
try this
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
because getElementByName is not function use getElementsByName instead with index of first element
I'm dynamically creating a table and trying to make each row (tr) sortable. I've followed the various documentation on the jQuery UI site and thought I understood. However, I can't quite seem to figure it out.
Where did I go wrong? Thanks!
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript>" href="jquery-ui.js"></script>
<script type="text/javascript" href="bootstrap-2.2.2.min.js"></script>
<script>
$(function() {
$( "tr" ).sortable();
$( "tr" ).disableSelection();
});
</script>
</head>
<body>
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<tr>
<td>Session Title</td>
<td>Start Time</td>
<td>End Time</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr />');
$tr.append($("<td />", { text: $("#session_title").val()} ))
$tr.append($("<td />", { text: $("#start_time").val()} ))
$tr.append($("<td />", { text: $("#end_time").val()} ))
$tr.appendTo("table");
$("#agenda_form").each(function (){
this.reset();
});
});
</script>
</body>
</html>
You need to use tbody instead of tr in your jquery selection. i would also suggest makeing your headers in a theader block --- http://jsfiddle.net/rcottkqx/1/
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time
<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<thead>
<th>Session Title</th>
<th>Start Time</th>
<th>End Time</th>
</thead>
</table>
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr class="t" />');
$tr.append($("<td />", {
text: $("#session_title").val()
}));
$tr.append($("<td />", {
text: $("#start_time").val()
}));
$tr.append($("<td />", {
text: $("#end_time").val()
}));
$tr.appendTo("table");
$("#agenda_form").each(function () {
this.reset();
});
$("tbody").sortable();
$("tbody").disableSelection();
});