danginkgo danginkgo - 1 month ago 9
jQuery Question

jquery add event for custom rows does not work

I am trying to add click events only to the columns in a row that has some text in the first column.
For the first row the click events should hide the rows that contain "1/" in the first column.
Here is my html table:

<table class="results">
<tr>
<td>1</td>
<td>Distribution_Approval_Archive_WorkFLow</td>
<td>0h:2m:59s:845ms</td>
<td><font color="red">TestFail</font></td>
</tr>

<tr>
<td>1/1</td>
<td>MyLogin</td>
<td>0h:0m:8s:298ms</td>
<td><font color="green">TestCasePass</font></td>
</tr>

<tr>
<td>1/2</td>
<td>OpenEFlowEnterprise</td>
<td>0h:0m:13s:912ms</td>
<td><font color="green">TestCasePass</font></td>
</tr>

<tr>
<td>2</td>
<td>Distribution_Approval_Archive_WorkFLow</td>
<td>0h:2m:59s:845ms</td>
<td><font color="red">TestFail</font></td>
</tr>

<tr>
<td>2/1</td>
<td>MyVismaLogin</td>
<td>0h:0m:6s:223ms</td>
<td><font color="green">TestCasePass</font></td>
</tr>

<tr>
<td>2/2</td>
<td>OpenEFlowEnterprise</td>
<td>0h:0m:5s:158ms</td>
<td><font color="green">TestCasePass</font></td>
</tr>

</table>


And here is my jQuery for adding the events:

for (i=1; i <= $(".results td:nth-child(1):not(:contains('/'))").parent().length; i++){
$($(".results td:nth-child(1):not(:contains('/'))").parent()[i-1]).children().click(function(){
$('.results td:nth-child(1):contains("'+ i +'/")').parent().slideToggle("fast");
})
}


Can you help fix the jQuery code?

Answer

Never bind events in loops,try the following

$('tr').find('td:first-child()').not(':contains("/")').parent().click(function(e){
   var index = $(this).find('td:first-child()').text().split('/')[0];
   $('td:contains("'+index+'/")').parent().slideToggle("fast");
});