如何使用jQuery獲取div元素的html內容

Question

我有一個動態創建的html表，因此我需要將某些單元格值輸入到我嘗試過next（）nextAll（）cosesst（）的jquery變量中，但對我沒有任何幫助。

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

我的頭部有以下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類而不是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. 您可以通過調用$('mytable tr').get(rowIndex).find('.mytable-col-iid').html()來通過jQuery獲取值$('mytable tr').get(rowIndex).find('.mytable-col-iid').html()

Answer 2

你有這個：

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

但這是行不通的，因為div.edite沒有下一個td 。 而且，您將無法在下一個td div找到div#iid ，因為它已經是該div 。 最后，您應該避免在此代碼中使用ID，因為最終將導致重復項無法使用。 將上面的行更改為此，它應該起作用：

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

Answer 3

ID在整個文檔中應該是唯一的。 我認為您應該對代碼進行一些更改，以便為每個id添加后綴（pj為行號）。無論如何，您可以使用$(this).parent().parent().find("#iid").html();

Answer 4

代替這個

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

這樣使用

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

Answer 5

您應該更改php代碼，以生成具有唯一數字標識符的表行

<?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

使用此代替：

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

因為在當前代碼中您具有：

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

那是行不通的，因為div旁邊沒有td 。 因此，您將無法在下一個td div找到div#iid 。