Dowemo
0 0 0 0


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.


Best Answer:


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>




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs