javascript - Display only $(this) row of table data when button is clicked -
i working on drop down option feature within table loads data mysql database. when user clicks button that's within row displays table data hidden. should display data in row below instead applies rows in table class $(.options). goal apply row under row contains .button. have far:
css:
.options { display:none; } mysql table php):
while($sound=mysql_fetch_assoc($records)){ echo "<tbody>"; echo "<tr>"; echo "<td width='40' class='player'> <a href='beats/".$sound['downloadlink']."' class='sm2_button'>play/</a></td>"; echo '<td width="250" class="name">'.$sound['name'].' <span class="red date">'.$sound['date'].'</span></td>'; echo "<td width='88' class='bpm'>".$sound['bpm']." b.p.m.</td>"; echo "<td width='72' class='length'>".$sound['length']."</td>"; echo "<td width='275' class='keywords'>".$sound['keywords']."</td>"; echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>"; echo "</tr>"; echo "<tr>"; echo "<td height='100' class='options' colspan='1'></td>"; echo "<td class='options' colspan='1'>mp3</td>"; echo "<td class='options' colspan='2'>wav</td>"; echo "<td class='options' colspan='2'>tracked out</td>"; echo "</tr>"; echo "</tbody>"; jquery function:
$(".button").on('click', function(){ $('.options').css('display', function(i,v){return v=='none' ? 'inline' : 'none' }); });
you can use such code in jquery function:
$(".button").on('click', function(){ // use $(this) element clicked. in case img element $(this) // find parent of type tr, row .parents('tr') // find next row .next('tr') // manipulate item .css('display', function(i,v){return v=='none' ? 'inline' : 'none' }); }); or since doing show / hide manipulation, instead of .css() function can use toggle() function
Comments
Post a Comment