I am using the Validation plugin from http://jquery.bassistance.de/validate/demo
which is a great plugin. I just found out after browsing the docs some
more that it has the capability of dynamically adding a row of data. I
would like to know how I can remove a row of data. After several
attempts at creating a removeJoin() function, and a couple of hours of
hacking it up, I decided to join the group.
Here's the script if anyone can offer assistance:
<html>
<head>
<title>Add Queries :: Add Joins</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/
screen.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var qTemplate = jQuery.format($("#qTemplate").val());
function addJoin() {
$(qTemplate(i++)).appendTo("#queryItems tbody");
}
var i = 1;
// start with one row
addJoin();
// add more rows on click
$("#addRow").click(addJoin);
});
</script>
<style type="text/css">
form.cmxform { width: 50em; }
form.cmxform input.submit {
margin-left: 0;
}
</style>
</head>
<body>
<div id="main">
<button id="addRow">Add another query to the form</button>
<textarea style="display:none" id="qTemplate">
<tr>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference
Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference
Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference
Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
<td class='type'>
<select name="item-type-{0}">
<option value="">Select...</option>
<option value="0">Learning jQuery</option>
<option value="1">jQuery Reference
Guide</option>
<option value="2">jQuery Cookbook</option>
<option vlaue="3">jQuery In Action</option>
<option value="4">jQuery For Designers</option>
</select>
</td>
</tr>
</textarea>
<form class="cmxform" method="get" action="foo.html">
<fieldset>
<legend>Create Joins For Our Query</legend>
<table id="queryItems">
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4"><input class="submit"
type="submit"
value="Submit"/></td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
</div>
</body>
</html>
