Question

我有一个动态创建的html表，所以我需要将一些单元格值输入到我试过的jquery变量中（）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>";
                                };

我的脑部有以下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>

该设计有两个优点：

您可以在课程mytable-td
您可以通过调用$('mytable tr').get(rowIndex).find('.mytable-col-iid').html()

Answer 2

你有这个：

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

但由于td旁边没有div.edite，因此无法正常工作。而且，您无法在下一个div#iid内找到td div，因为已经div。最后，你应该避免在这段代码中使用ID，因为你最终会得到一些不会起作用的重复项。将上面的行更改为此，它应该可以工作：

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

Answer 3

ID在整个文档中应该是唯一的。我认为你应该为每个id添加一个后缀（p.j.行的编号）更改代码无论如何，你可以用类似的东西选择那些值 $(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();

这不会起作用，因为td旁边没有div。因此，您无法在下一个div#iid内找到td div。

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

6 个答案: