How to get the tag from table using jQuery?

Question

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.

Answer 1

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).

Answer 2

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();

Answer 3

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());

Answer 4

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

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

Answer 5

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>

Answer 6

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>