We have simple codes as below. We have an add button on every row where it can add dynamic rows accordingly and this works fine. The problem now we need some more complexity where in the Serial column we need another add button beside the serial drop down list.By click this add button you it will add more drow down list specifically in that column and row. So we are lost as to how to modify it to enable this functionality? Any idea?
<head>
<link rel="stylesheet" type="text/css" href="my1.css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function checkRows(form) {
//$(form).validate().resetForm();
//alert("Length : "+$('table.dynatable tbody tr', form).length);
if ($('table.dynatable tbody tr', form).length > 2) {
alert("Call setup multiple row");
}
}
var form = $("#form1");
checkRows(form);
setupFormValidation(form);
var prot = $('tr.prototype').clone().removeClass('prototype');
$(form).data('prototype', prot);
var id = 1;
// Add button functionality
$("table.dynatable button.add").click(function() {
var form = this.form;
id++;
// Get a new row based on the prototype row
//var prot = master.find(".prototype").clone();
var prot = $(form).data('prototype').clone();
prot.find('[name^="row_"]').attr("value", 'row_'+id);
prot.find('[name^="id"]').attr("value", id);
prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
prot.find('[name^="locationFrom"]').attr('id', 'locationFrom' + id + '');
prot.find('[name^="locationFrom"]').attr('value', '');
prot.find('[name^="serial"]').attr('name', 'serial[' + id + ']');
prot.find('[name^="serial"]').attr('id', 'serial' + id + '');
prot.find('[name^="serial"]').attr('value', '');
$("#dynamicRow").find('tbody').append(prot);
$('<button class="dynamic-button">my button</button>').appendTo($('#row_1'));
setupFormValidation(form);
return false;
});
function setupFormValidation(form)
{
//alert("validate :");
$(form).validate();
}
$('table.dynatable tbody tr select[name^="locationFrom"]').live('change',handleLocationFromUpdate);
function handleLocationFromUpdate(index)
{
if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length == 0)
{
var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
if(nextValue.val()==$(this).val())
$(this).val('');
}
else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
{
//alert("Last Field");
var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
if(prevValue.val()==$(this).val())
$(this).val('');
}
else
{
var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
$(this).val('');
}
}
$('table.dynatable tbody tr select[name^="serial"]').live('change',handleSerialUpdate);
function handleSerialUpdate(index)
{
var sCheck = new Array ();
$('select[name^="serial"]').each(function(i) {
//alert("VALUE IS : "+$(this).val()+" "+$("option:selected", this).text() );
jQuery.inArray($(this).val(), sCheck);
if($(this).val()>0)
{
if (jQuery.inArray($(this).val(), sCheck) == -1) {
sCheck.push($(this).val());
}
else {
alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
$(this).val('');
return false;
}
}
});
}
// Remove button functionality
$("table.dynatable button.remove").live("click", function() {
if ($('table.dynatable tbody tr', form).length > 2)
{
var form = this.form;
$(this).closest("tr").remove();
}
$('select[name^="locationFrom"]').each(function(i) {
if($(this).closest('tr').next().length > 0 && $(this).closest('tr').prev().length == 0)
{
alert("first Field");
var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
if(nextValue.val()==$(this).val())
$(this).val('');
}
else if($(this).closest('tr').next().length == 0 && $(this).closest('tr').prev().length > 0)
{
alert("Last Field");
var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
if(prevValue.val()==$(this).val())
$(this).val('');
}
else
{
alert("middle Field");
var prevValue = $('select[name^="locationFrom"]', $(this).closest('tr').prev('tr'));
var nextValue = $('select[name^="locationFrom"]', $(this).closest('tr').next('tr'));
if(prevValue.val()==$(this).val() || nextValue.val()==$(this).val())
$(this).val('');
}
});
var sCheck = new Array ();
$('select[name^="serial"]').each(function(i) {
//alert("VALUE IS : "+$(this).val()+" "+$("option:selected", this).text() );
//jQuery.inArray($(this).val(), sCheck)
if($(this).val()>0)
{
if (jQuery.inArray($(this).val(), sCheck) == -1) {
sCheck.push($(this).val());
}
else {
alert("Serial "+$("option:selected", this).text()+" Selected More Than Once");
$(this).val('');
return false;
}
}
});
});
jQuery('.dOnly').live('keyup', function ()
{
this.value = this.value.replace(/[^0-9\\.]/g,'');
});
});
</script>
<style type="text/css">
.dynatable {
border: solid 1px #000;
border-collapse: collapse;
}
.dynatable th,
.dynatable td {
background-color:#ccc;
font-size:14px;
font-color:#ffffff;
font-family:Calibri;
}
.dynatable .prototype {
}
label.error
{
display: block;
color:red;
}
td { vertical-align: top; }
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" id="form1" >
<table id="table1">
</table>
<table class="dynatable" id="dynamicRow">
<thead>
<tr>
<th>ID</th>
<th>Location</th>
<th>Serial</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr id="row_1" name="row_1" class="prototype" >
<td><input type="text" name="id[1]" value="1" /></td>
<td><select class='required' id='locationFrom1' name='locationFrom[1]' >
<option value=''>Select Location</option>
<option value='1'>Loc 1</option>
<option value='2'>Loc 2</option>
<option value='3'>Loc 3</option>
<option value='4'>Loc 4</option>
<option value='5'>Loc 5</option>
</select></td>
<td><select class='required' id='serial1' name='serial[1]' >
<option value=''>Select Serial</option>
<option value='1'>Serial 1</option>
<option value='2'>Serial 2</option>
<option value='3'>Serial 3</option>
<option value='4'>Serial 4</option>
<option value='5'>Serial 5</option>
</select></td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
<input class="buttons" type="submit" name="Submit" value="Submit" />
</form>
</body>