javascript - 如何使用jquery获取div元素的html内容

Question

我有一个动态创建的 html 表，所以我需要将一些单元格值放入 jquery 变量中，我尝试了 next() nextAll() cosesst() 但对我没有任何作用。

这是我使用 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>";
                                };

我的 head 部分有以下 jquery 函数。该代码用于测试。它总是给我未定义的信息。

iid、pid、desc 是我想要获取变量值的 id。

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

Answer 1

您的代码中有一个严重错误:您为表中的每一行分配一个 ID。所以你的 ID 不是唯一的，但它们应该是唯一的。

所以尝试做出改变:使用 css-classes 而不是 ID。可能:

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

该设计有两个优点:

1. 您可以在 mytable-td 类中“隐藏”填充
2. 您可以通过 jQuery 调用 $('mytable tr').get(rowIndex).find('.mytable-col-iid').html() 获取值