[eluser]Fielder[/eluser]
I've very new to jQuery and have managed to put this little piece together using articles and tuts from the internet. Looking for ways and techniques to improve and streamline this piece of code, particularly the selectors... seems to be quite a bit of complicated code for what i want it to do - but it works.
The setup, I've got a table with a <td><img></td> that the user can click on the image to dynamically add another row immediately below the current <tr>. This row will expand and contain additional details about a customer. When the user clicks on the <img> again, it hides the newly added row and then removes it from the table, dynamically.
The other condition is that only 1 of these "detail" rows can be open at any given time.
Opinions are appreciated.
Code:
<table id=multistore-table >
<tr>
<td>ID</td>
<td>Customer</td>
<td>Details</td>
</tr>
<tr id=ms_rowdata61>
<td>1</td>
<td>Cust 1</td>
<td><img /></td>
</tr>
<tr id=ms_rowdata32>
<td>2</td>
<td>Cust 2</td>
<td><img /></td>
</tr>
<tr id=ms_rowdata98>
<td>3</td>
<td>Cust 3</td>
<td><img /></td>
</tr>
</table>
Code:
$(document).ready(function() {
// Contract addendum table to show store entry details
$("#multistore_table td img").click(function(){
var id = "#" + $(this).closest('tr').attr('id');
var ms_id = id.substring(10);
var rowEdit_id = "rowEdit" + ms_id;
if (this.src.match('plus'))
{
// This row is closed, open it
var status = "open";
var icon_filename = "minus.gif";
var msg = "Close Edit Panel";
// Close all other open rows
$("#multistore_table tr").each(function(){
if ($(this).hasClass('ms_rowEdit'))
{
$(this).fadeOut("normal", function(){
$(this).prev('tr').find('img').attr('src', '../../../assets/images/treeview/plus.gif');
$(this).remove();
});
}
});
$.post(base_url + "all_search/AJAXmultistore_editPanel", {'multistore_id' : ms_id, 'rowEdit_id' : rowEdit_id, 'status' : status},
function(data){
$(id).after(data);
// jQuery UI Tabs
$(".tabs").tabs({
selected: 0,
fx: {opacity: 'toggle'}
});
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
$("#datepicker3").datepicker();
$("#addendum_removeStore").click(function(){
var rowEdit_class = ".ms_rowEdit";
$(rowEdit_class).fadeOut("normal", function(){
var gridRow_id = '#' + $(this).prev('tr').attr('id');
$(rowEdit_class).remove();
$(gridRow_id).remove();
$.post(base_url + "all_search/AJAXmultistore_removeMultistore", {'multistore_id' : ms_id}, function(){
});
});
});
});
}
else
{
// This row is open, close it
var status = "close";
var icon_filename = "plus.gif";
var msg = "Open Edit Panel";
var id = "#" + rowEdit_id;
$(id).fadeOut("normal", function(){
$(this).remove();
});
}
this.src = "../../../assets/images/treeview/" + icon_filename;
this.title = msg;
this.alt = msg;
});
});