CODEWITHSUNDEEP
javascriptjquery
sureone
sureone

Reputation: 851

How to select a child element of parent by jquery selector?

How to select the "tbody" use jquery from function "tbodyExpand()" in below html code? I tried to use $(this).closest('table').find('tbody') but doesn't work.

<div class="bs-example">
    <table class="table table-border table-striped table-condensed table-hover">
        <thead>
        <tr>
            <td><b>TITLE</b><a href="javascript:void(0)" onclick="tbodyExpand()" style="float: right;">EXPAND</a></td>
        </tr>
        </thead>
        <tbody class="hide">
        <tr>
            <td>ALT (U/L)</td>
            <td><input class="span1" name="ALT" value="" placeholder=""></td>              
        </tr>

Upvotes: 1

Views: 354

Answers (3)

PSL
PSL

Reputation: 123739

By doing onclick="tbodyExpand.call(this)" you can use:

  $(this).closest('table').find('tbody');

Otherwise this inside the function will be pointing to the global object (window) not the element clicked on.

Instead of writing inline handlers you can bind event using the selector.

Example:

<a href="#" class="expand floatRight">EXPAND</a>

CSS:

.floatRight{
     float: right;
 }

and

   $(function(){
       $('.expand').click(function(e){
          e.preventDefault(); //Much better than doing javascript:void(0)
          var $tbody = $(this).closest('table').find('tbody');`
          //or $(this).closest('thead').next('tbody');
       });
   });

This way you can also separate out, css, js and html and avoid writing inline scripts/styles.

Upvotes: 2

brandonscript
brandonscript

Reputation: 72825

While all of these examples are legit, you could greatly simply your structure:

  1. Give the active element an ID (in this case, I've given it click).

  2. Bind to the .click() event of that ID:

    $('#click').click(function(e) {
    //you can do stuff here! and use $(this).
});

  3. Search for the element you want:

    $(this).closest('table').find('tbody');

Resulting in:

<div class="bs-example">
    <table class="table table-border table-striped table-condensed table-hover">
        <thead>
            <tr>
                <td><b>CLICK EXPAND:</b> <a href="#" id='click' style="float: right;">EXPAND</a>
                </td>
            </tr>
        </thead>
        <tbody class="hide">
            <tr>
                <td>ALT (U/L)</td>
                <td>
                    <input class="span1" name="ALT" value="" placeholder="" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

And your javascript (with jQuery loaded):

$('#click').click(function(e) {
    e.preventDefault(); //blocks the default action of an <a> link.
    console.log($(this).closest('table').find('tbody'));
});

(Note that I slightly modified your code to make it easier to see what's going on).

Play around with it here http://jsfiddle.net/remus/VNpn7/

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this

html

 <a href="javascript:void(0)" onclick="tbodyExpand(this);" style="float: right;">EXPAND</a>

javascript 

   function tbodyExpand(obj){
     // your other code goes here
     $(obj).closest('table').find('tbody');
   }

Upvotes: 1

Related Questions