I am trying to use JQuery UI to write a function which takes an id of a row and and hide all the other rows having id's starting with the id passed as an argument to the function. (I am trying something like collapsing child rows if a parent row is clicked).
For e.g.
If the passed id is '1', all the rows having IDs '11', '111', '12', '121', '122', etc should be hidden but not the one with the ID as just '1'
If the passed id is '2', all the rows having IDs '21', '211', '22', '221', '222', etc should be hidden but not the one with the ID as just '2'
Currently I am trying something like this:
$(function() {
// run the currently selected effect
function runEffect(divId) {
// set effect type
var selectedEffect = "blind";
// most effect types need no options passed by default
var options = {};
// run the effect
$('tr[id^=%s]'.replace('%s',divId)).hide( selectedEffect, options, 1000, callback );
};
// callback function
function callback() {
};
// set effect from select menu value
$( "tr" ).click(function() {
var divId = this.getAttribute('id');
runEffect(divId);
return false;
});
});
This works fine with just one problem. It also hides the row with the id that was passed. So if I click on row having ID as '1', it hides all rows with ID as 1 and those starting with 1. I just want to hide all other rows starting with ID 1 but not the one with id as just '1'.
Please help!