I have 2 tables on a page at once. I want to only manipulate the bottom table through jQuery by adding a row below the row that is clicked. I've managed to figure out using this.rowIndex
to add the extra row based on the <tr>
tag being clicked. But when 2 tables are in the mix, it gets confusing.
I've tried using jQuery ID selectors based on the table ID's but it either doesn't work or only the top row of the table is clickable. I've tried #tableID > thead > tr","tr#tableID", "#tableID > tr
, etc. The first one works but only for the top row.
I've dumbed it down to the simplest form I could get it in on my fiddle page. In it's current form here, only the top table works. How do I get it so only the bottom table works and have it also ignore the "header" row being clicked?
JavaScript:
$('tr').click(function(){
html = "<tr><td>Jquery</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td>";
$('tr').eq(this.rowIndex).after(html);
});
HTML:
<table id="detail" border=1>
<thead>
<tr>
<td width="138px"><h5>Campaign Name</h5></td>
<td width="5%"><h5>Invites Sent</h5></td>
<td width="5%"><h5>Invites Opened</h5></td>
<td><h5>Unique Visits</h5></td>
<td><h5>Referrals Shared</h5></td>
<td><h5>Inquiries</h5></td>
<td><h5>Sales Generated</h5></td>
</tr>
</thead>
<tr>
<td>Test1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Test2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
<br />
<table id="detail2" border=1>
<thead>
<tr>
<td width="138px"><h5>Campaign Name</h5></td>
<td width="5%"><h5>Invites Sent</h5></td>
<td width="5%"><h5>Invites Opened</h5></td>
<td><h5>Unique Visits</h5></td>
<td><h5>Referrals Shared</h5></td>
<td><h5>Inquiries</h5></td>
<td><h5>Sales Generated</h5></td>
</tr>
</thead>
<tr>
<td>Test3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>Test4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
Thanks everyone!