CODEWITHSUNDEEP
javascriptjqueryhtml
Pete
Pete

Reputation: 784

How to get the <td> tag from table using jQuery?

I have a table with several rows and this is how one of the rows look like:

<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>

I want to get the value of the div inside the first td in this tr. I have buttons in the same td and when I click them I go to a function and I need access to the row in that function.

I have tried the following

console.log($(this).closest("tr"));
console.log($(this).closest("tr").find(".div"));

but I keep getting 

[prevObject: m.fn.init[1], context: undefined]

I want to access to this row and the access to the previous and next row as well but I am not able to see where I'm going wrong here.

Thank you.

Upvotes: 1

Views: 3132

Answers (6)

PeterKA
PeterKA

Reputation: 24648

In the button click handlers you can use the following for current, next, and previous rows, and the contents of the div:

var thisROW = $(this).closest('tr'),
    nextROW = thisROW.next(),
    prevROW = thisROW.prev(),
    div = $('div.entry_karma', thisROW).html();


$('button[id^="vote_down_"]').on('click', function() {
    var thisROW = $(this).closest('tr'),
        nextROW = thisROW.next(),
        prevROW = thisROW.prev(),
        div = $('div.entry_karma', thisROW).html();
    console.log( thisROW[0], nextROW[0], prevROW[0], div.trim() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
<tr>
    <td>
        <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
        </div>

        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
        </button>

        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
        </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
</tr>
    </tbody>
  </table>

Upvotes: 1

wahwahwah
wahwahwah

Reputation: 3177

You can use a parent-child selector in jQuery that includes the element and the class:

var child = $('td > .entry_karma');

child now equals <h4>4</h4> where you can then retrieve the html and get 4

To get the parent <tr> element you can use the jQuery .has() selector using the same variable in the above var child = * snippet :

var child = $('td > .entry_karma');

console.log(child.html());

// get parent tr
var parent = $('tr').has(child);

console.log(parent.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="entry_karma" id="entry_karma_9">
        <h4>4</h4>
      </div>

      <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
        <span class="glyphicon glyphicon-arrow-up"></span>
      </button>

      <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
        <span class="glyphicon glyphicon-arrow-down"></span>
      </button>

    </td>
    <td>Hello</td>
    <td>2014</td>
  </tr>
</table>

Or, if the value is always going to be nested in the <h4> tag, you can access it directly like this:

var val = $('td > .entry_karma > h4').html();


var val = $('td > .entry_karma > h4').html();
console.log(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td>
          <div class="entry_karma" id="entry_karma_9">
            <h4>4</h4>
          </div>

          <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">
            <span class="glyphicon glyphicon-arrow-up"></span>
          </button>

          <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">
            <span class="glyphicon glyphicon-arrow-down"></span>
          </button>

        </td>
        <td>Hello</td>
        <td>2014</td>
      </tr>
    </table>

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Just replace .div with div, and find the closest td since the button is already inside the first td, like so:

console.log($(this).closest("td").find("div"));

P.S.: If you use .closest('tr'), it will find all existing divs (if you have more than one).

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

Its not .div. Its just div. .div refers to an element with class div. so you have to refer either just div or div with class entry_karma

$(this).closest("tr").find("div.entry_karma");

Update

Try

$(this).closest("tr").find(".entry_karma>h4").text();

To get the value you need to do what @wahwahwah said and to get previous and next tr you can do it as below:

var prevTr=$(this).closest("tr").prev();
var nextTr=$(this).closest("tr").next();

Upvotes: 1

Rahul Khandelwal
Rahul Khandelwal

Reputation: 104

You havn't defined any class name div. Try like this:

console.log($(this).closest("tr").find("div:first"));

Upvotes: 1

pavel
pavel

Reputation: 27092

You are looking for element with class="div", but there is nothing like that.

console.log($(this).closest("tr").find("div"));

Value (or better, content) of this div is in .html(), or .text().

console.log($(this).closest("tr").find("div").html());

Upvotes: 1

Related Questions