Question

I’ve got a table, each row containing 3 <td>. Now, I assigned a class-name to the <tr>, and another one to the first <td> of said <tr>. I created a click event for the whole <tr>, which then should get the html value of the first <td> (that one with the class name). I used children, as it seems does select the right <td>, but I can’t figure out how to read it’s html value (innerHTML).

HTML:

<tr class="dataset">
    <td class="changeid">2</td>
    <td>Someone's name</td>
    <td>Some other info</td>
</tr>

JS:

$(".dataset").click(function() {
    temp = $(this).children(".changeid"); // It only returns 1 result

    // How to get it's HTML value?
}

I don’t know if this was the best approach to solve it, it would have been easier for me if I could have used unique id’s for all rows, but unfortunately the HTML is generated, and doesn’t allow giving different id’s to each <tr>.

Answer 1

To get the element’s innerHTML, use jQuery’s .html() method.

$(".dataset").click(function() {
    var temp = $(this).children(".changeid").html();
}