I need to be able provide a table on web page with one row which has a two drop down list and one textbox and the user's should be able to add any number of rows they want. I need to to this using jquery so that i can avoid post back. Is this possible to be done in Jquery and if it is possible i was looking for some example which will be like a pointer
Add a comment
|
1 Answer
This should get you started... save as a .html file for an example
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function createTextbox(){
return "<input type='text' />"
}
function createDropDown(){
return "<select><option>One</option><option>Two</option><option>Three</option></select>"
}
function createRow(){
return "<tr><td>" + createTextbox() + "</td><td>" + createDropDown() + "</td><td>" + createDropDown() + "</td></tr>";
}
function getValuesForPostback(){
//format as XML, JSON, or Whatever
var ToReturn = "<items>";
$('#sampleTable tr').each(function(){
ToReturn += "<item>";
//Get the textbox value
ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";
//Get the select values
$(this).find('select option:selected').each(function(){
ToReturn += "<select>" + $(this).val() + "</select>";
});
ToReturn += "</item>";
});
ToReturn += "</items>";
return ToReturn;
}
function submitValues()
{
alert(getValuesForPostback());
//NOW: Just ajax or post back this value to the server and parse for your data.
}
$(document).ready(function(){
$('#sampleTable').append(createRow());
$('#btnAdd').click(function(){
$('#sampleTable').append(createRow());
});
$('#btnSubmit').click(function(){
submitValues();
});
});
</script>
</head>
<body>
<table id="sampleTable">
</table>
<button id="btnAdd">Add</button>
<button id="btnSubmit">Submit</button>
</body>
</html>
