how to get html content of a div element using jquery

Question

I have a dynamically created html table so I need to get some of the cell values in to jquery variables I tried next() nextAll() cosesst() but nothing work for me.

this is my table created using php

if ($result = $hongcon->query($query)) {
                                while ($row = $result->fetch_object()) {
                                    echo "<tr>";
                                    echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
                                    echo "<td><div id=\"id\" style=\"padding: 10px; \">$row->id</div></td>";
                                    echo "<td><div style=\"padding: 10px;\" class=\"edite\">$row->itemName</div></td>";
                                    echo "<td><div id=\"iid\" style=\"padding: 10px;\">$row->iId</div></td>";
                                    echo "<td><div id=\"pid\" style=\"padding: 10px;\">$row->pId</div></td>";
                                    echo "<td><div id=\"image\" style=\"padding: 10px;\">$row->itemImage</div></td>";
                                    echo "<td><div id=\"desc\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
                                    echo "<td><div id=\"pdfone\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
                                    echo "<td><div id=\"pdftwo\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
                                    echo "<td><div id=\"pdfthree\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
                                    echo "</tr>";
                                };

and I have following jquery function in my head section. this code is for testing. always it gives me undefined.

iid, pid, desc are the id that I want to get the values to variables.

$(document).ready(function() {
                $("div.edite").on("dblclick", function() {
                    OriginalText = $(this).html();
                    $id = $(this).next("td div").find("#iid").html();
                    alert($id);
      });
            });

Answer 1

You have a bad mistake in your code: You assign an ID for each row in the table. So your IDs are NOT unique but they should.

So try to make a difference: Use css-classes instead of IDs. Possible:

 <table><!-- ... --> <tr>
     <td class="mytable-td mytable-col-iid">...</td>
     <td class="mytable-td mytable-col-pid">...</td>
     <!-- ... -->
 <tr></table>

That design has two advantages:

1. You can "hide" your padding in the class mytable-td
2. You can get the values via jQuery by calling $('mytable tr').get(rowIndex).find('.mytable-col-iid').html()

Answer 2

You have this:

$id = $(this).next("td div").find("#iid").html();

But that won't work because there is no td that is next from the div.edite . And also, you won't be able to find the div#iid inside the next td div because it is that div already. Finally, you should avoid using IDs in this code because you will end up with duplicates which won't work. Change the above line to this and it should work:

$id = $(this).closest("TR").next("td div").html();

Answer 3

ids should be unique within the entire document. I think you should change the code a bit adding a suffix to each id (pj the number of the row) Anyway, you could select those values with a something like $(this).parent().parent().find("#iid").html();

Answer 4

Instead of this

$id = $(this).next("td div").find("#iid").html();

Use like this

$id = $(this).parent().siblings().find("#iid").html();

Answer 5

You should change your php code in order to generate table rows with unique numeric identifier

<?php
if ($result = $hongcon->query($query)) {
while ($row = $result->fetch_object()) {
    echo "<tr>";
    echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
    echo "<td><div id=\"id_$row->id\" style=\"padding: 10px; \">$row->id</div></td>";
    echo "<td><div style=\"padding: 10px;\" class=\"edite\" editId=\"$row->id\">$row->itemName</div></td>";
    echo "<td><div id=\"iid_$row->id\" style=\"padding: 10px;\">$row->iId</div></td>";
    echo "<td><div id=\"pid_$row->id\" style=\"padding: 10px;\">$row->pId</div></td>";
    echo "<td><div id=\"image_$row->id\" style=\"padding: 10px;\">$row->itemImage</div></td>";
    echo "<td><div id=\"desc_$row->id\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
    echo "<td><div id=\"pdfone_$row->id\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
    echo "<td><div id=\"pdftwo_$row->id\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
    echo "<td><div id=\"pdfthree_$row->id\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
    echo "</tr>";
};
?>

JQUERY:

$(document).ready(function() {

            $("div.edite").on("dblclick",function() {
                $iid = "iid_"+$(this).attr('editId');
                OriginalText = $(this).html();
                $id = $("#"+$iid).html();
                alert($id);
            });
});

Answer 6

Use this instead:

$id = $(this).parent("td div").find("#iid").html();

Because in your current code you have:

$id = $(this).next("td div").find("#iid").html();

And that wouldn't work because there is no td next to the div . Due to that, you won't be able to find div#iid inside the next td div .