finding specific row in table

Question

I have an HTML table that holds two levels of rows, for example:

I have a button on each row of the first level, that executes JavaScript function, and pass the button to the function

onclick="js:BillingAddNewChildLine(this);"

I need a way to find inside the function (BillingAddNewChildLine) the last second level row under the first level row that button was clicked:

• if I click on the button of line 1 I should get line 1.2
• if I click on button on line 2 I should get line 2.2

this selector will return the last row of the table, is there any way to use jQuery selector in order to get what i need ?

$(".BillingTable > tbody tr:last") 

many thanks

Answer 1

It might be easier to accomplish what you want if you give a "parent" class to all the parent(1st level) rows.

<tr class="parent">
    <td>1</td>
    <td><button>Get Last Child</button></td>
    <td>Description</td>
</tr>
<tr>
    <td>1.1</td>
    <td></td>
    <td>Description</td>
</tr>

Then inside the onclick event of the buttons, you can get the final child(or 2nd level line, 1.2 and 2.2 in your example) using:

$(this).closest('tr').nextUntil('.parent').last();

(new rows can be added using the inserAfter or after method, see the attached fiddle)

DEMO

Answer 2

I am assuming you are dynamically creating the table but even if you are not, you can give every same level row a class like

<tr class="level-1">
   <td>
       <button class="btn" data-level="level-1"></button>
   </td>
</tr>
<tr class="level-1">
   <td></td>
</tr>
<tr class="level-2">
   <td>
       <button class="btn" data-level="level-2"></button>
   </td>
</tr>

and then

$('btn').click(function(){
   var level = $(this).attr('data-level');
   var row = row.last();
});

Answer 3

are you looking for something like this??

jsfiddle demo

$('td').live('click', function(){
    tempval=parseInt($(this).html());
    newval=tempval+1;

    $(this).parents('table').append('<tr><td class="valuePlace">'+ newval +'</td><td>hi</td></tr>');
})